ExpressionEngine CMS
Open, Free, Amazing

Thread

This is an archived forum and the content is probably no longer relevant, but is provided here for posterity.

The active forums are here.

Flexigrid - Lightweight but rich data grid

March 28, 2008 10:13am

Subscribe [82]
  • #466 / Jul 18, 2008 4:47am

    paulopmx

    164 posts

    Hi,

    I’ve written an example in ASP.NET. If anyone is interested it’s here http://www.raihaniqbal.org/blog/using-flexigrid-in-your-aspnet-application/

    Enjoy!

    Great job.

  • #467 / Jul 18, 2008 4:49am

    paulopmx

    164 posts

    Paulo,

    I am using flexigrid in a single-page thick-client ajax app that does not do full page postbacks. In this context I have found that flexigrid leaks a pretty significant amount of memory in IE. An instance of the grid with all the bells and whistles (example 3) leaks about 2-5 MB of memory per execution of the flexigrid() method.

    Because of the way IE is designed this memory is not freed with a refresh or by closing the tab. It is only freed when all instances of IE are closed.

    I’ve put together a bare minimum demo page that shows the leak. Look at it in IE6 or IE7 and click the ‘new instance’ buttons multiple times while monitoring IE memory consumption. Each click empties the containing div (using jQuery’s empty() method) and creates a new flexigrid instance.

    Also, I’ve tested Firefox & IE8 beta…they DO NOT have the problem.

    Yes. IE sucks. I do garbage collection when loading new rows, but i guess i need to do garbage collection on page unload also. This I do on my own, when I anticipate loading multiple dynamic objects on my page.

  • #468 / Jul 18, 2008 4:53am

    swhitlow

    22 posts

    tried the json_encode. But still no luck. Is there anything else I can try?

    Would you be able to put a carriage return in your own database really quick and see what you get with the Flexigrid?

  • #469 / Jul 18, 2008 5:06am

    paulopmx

    164 posts

    tried the json_encode. But still no luck. Is there anything else I can try?

    Would you be able to put a carriage return in your own database really quick and see what you get with the Flexigrid?

    Actually I do have data with \n already and it works perfectly. Post your code on how you use json_encode here so I can see if there is something we can do.

    Paulo

  • #470 / Jul 18, 2008 5:46am

    swhitlow

    22 posts

    Here is the code:

    if($tblName == ‘accounts’){
    $sql = "select accounts.id,
    accounts.name,
    accounts.date_modified,
    accounts.phone_office,
    accounts.shipping_address_street,
    accounts.shipping_address_city,
    accounts.shipping_address_state,
    accounts.shipping_address_postalcode
    FROM accounts $where $sort $limit";
    }else {
    $sql = "select contacts.id, contacts.last_name, contacts.first_name,
    CONCAT(IFNULL(contacts.salutation,''), ' ', IFNULL(contacts.first_name,''), ' ', IFNULL(contacts.last_name,'')) as name,
    contacts.phone_work as phone_office,
    contacts.primary_address_street as shipping_address_street,
    contacts.primary_address_city as shipping_address_city,
    contacts.primary_address_state as shipping_address_state,
    contacts.primary_address_postalcode as shipping_address_postalcode
    FROM contacts $where $sort $limit";
    }

    $GLOBALS[‘log’]->info(’===================================================================’);
    $GLOBALS[‘log’]->info(‘SQL Statment: ’ . $sql);
    $GLOBALS[‘log’]->info(’===================================================================’);


    $result = runSQL($sql);

    if($tblName == ‘accounts’) {
    $total = countRec('id','accounts',$where);
    } else {
    $total = countRec('id','contacts',$where);
    }

    header(“Expires: Mon, 26 Jul 1997 05:00:00 GMT” );
    header(“Last-Modified: ” . gmdate( “D, d M Y H:i:s” ) . “GMT” );
    header(“Cache-Control: no-cache, must-revalidate” );
    header(“Pragma: no-cache” );
    header(“Content-type: text/x-json”);
    $json = “”;
    $json .= “{\n";
    $json .= "page: $page,\n";
    $json .= "total: $total,\n";
    $json .= "rows: [";
    $rc = false;

    if($_REQUEST['type'] == 'samples'){
    $type = 'samples';
    }

    while ($row = mysql_fetch_array($result)) {
    if ($rc) $json .= “,”;
        //str_replace(”\n”, “”, $string)
       
        $address = trim($row[‘shipping_address_street’]);

        // $address = trim(addslashes($row[‘shipping_address_street’])) . ’ ’ .
        //                trim(addslashes($row[‘shipping_address_city’])) . ‘, ’ . 
        //                trim(addslashes($row[‘shipping_address_state’])) . ’ ’ .
        //                trim(addslashes($row[‘shipping_address_postalcode’]));
       
        //$address = str_replace(”\n”, “”, $address);
        //$address = str_replace(”\r”, “”, $address);
        //$address = str_replace(”/U”, “”, $address);
       
        $address = preg_replace(’/[\\r\\n]/U’,’‘,$address);

  • #471 / Jul 18, 2008 5:47am

    swhitlow

    22 posts

    Please note that I have tried the str_replace as well as the json_encode($address) but nothing has worked. Here is what I am getting back through Firebug:
    rows: [

    {id:'aa505f50-dade-6272-2717-47f2b333320e',cell:['aa505f50-dade-6272-2717-47f2b333320e', 'Add to Route’,‘2 Big Consolidation Corp 418993’,’(754
    ) 301-4377’,‘9 IBM Path’,‘St. Petersburg’,‘CA’,‘37000’]},
    {id:'d89e5bd7-20d4-8831-65dc-47f2b3d721b2',cell:['d89e5bd7-20d4-8831-65dc-47f2b3d721b2', 'Add to Route’,‘2 Tall Stores 376377’,’(236) 854-7906’,‘8923 Chessie
    Dr.
    ‘,‘Indianapolis’,‘IN’,‘46217’]},
    {id:'c0c5e69c-59fa-f341-1aa8-47f2b3a9b06c',cell:['c0c5e69c-59fa-f341-1aa8-47f2b3a9b06c', 'Add to Route’,‘A.G. Parr PLC 828674’,’(743) 194-6946’,‘345 Sugar
    Blvd.’,‘St. Petersburg’,‘CA’,‘39570’]},

    Notice the extra carriage return on the line that says “8923 Chessie Dr.” then it drops down one line and has the “Indianapolis”.

    That is where the problem is. If I go into the database and get rid of that one line, It solves the problem. But, I obviously have to code for the user who might input the one line in there. Even if by accident.

  • #472 / Jul 18, 2008 5:54am

    paulopmx

    164 posts

    Please note that I have tried the str_replace as well as the json_encode($address) but nothing has worked. Here is what I am getting back through Firebug:

    That is where the problem is. If I go into the database and get rid of that one line, It solves the problem. But, I obviously have to code for the user who might input the one line in there. Even if by accident.

    Try using json_encode like so:

    $rows = array();
        echo "{";
        echo "page: $page,\n";
        echo "total: $total,\n";
        echo "rows: ";
        foreach ($db as $row) 
            {
            $rows[] = array(
            "id"=>$row['pid']
            ,"cell"=> array(
                    '<a href="http://%27.site_url" class="edit">.'"]</a>'
                    ,$row['name']
                    ,$row['shortdesc']."\n Details"
                    ,$row['publish']
                    )
                );
            }
        echo json_encode($rows);
        echo "\n";
        echo "}";

    As you can see i’ve purposely added \n on shortdesc, in case my values doesn’t have \n.
    Please not that json_encode as well as any ajax app, requires utf-8 encoding.

  • #473 / Jul 18, 2008 9:24am

    Armorfist

    121 posts

    Hello,
    Don’t know if this question was already answered but is it possible to maintain item selection even if you change page? You can see this in the http://www.magentocommerce.com/demo datagrid. You can select only visible records or all records and if you change page it always maintains the selection.

    Thanks

  • #474 / Jul 18, 2008 9:30am

    paulopmx

    164 posts

    Hello,
    Don’t know if this question was already answered but is it possible to maintain item selection even if you change page? You can see this in the http://www.magentocommerce.com/demo datagrid. You can select only visible records or all records and if you change page it always maintains the selection.

    Thanks

    Yes its possible to do this. but it requires you to do the bulk of the work, like storing the ids of your row selection either in a cookie or a session array, and then creating a function that will be triggered by onSuccess, to add .trSelected class to previously selected rows.

  • #475 / Jul 18, 2008 2:44pm

    Ibere

    1 posts

    Hi, I’m triing to use flexigrid, in the easy way… (without json or ajax), just a simple table (with all TRs and TDs tag), and in the flexigrid starter I had assigned buttons to test function, but when I try to retrieve a row reference (id), i get an empty string..
    The script that I am using to get the list, is the same script that was posted early in this forum.
      var items = $(’.trSelected’,grid);
      var itemlist =’‘;
      for(i=0;i<items.length;i++){
    itemlist+= items.id.substr(3)+",";
    }
      alert〈“Items selected: “+itemlist〉;

    and the start of flexigrid is:

    $(’#users’).flexigrid(
    { colModel:[{display: 'id',name: 'id', width : 100, sortable : true, align: 'left'},
            {display: 'Login',name: 'login', width : 100, sortable : true, align: 'left'},
            {display: 'Nome',name: 'nome', width : 400, sortable : true, align: 'left'} ],
      buttons : [ {name: 'Add', bclass: 'add', onpress : test},
              {name: 'Delete', bclass: 'delete', onpress : test},
              {name: 'Alter', bclass: 'change', onpress : test} ],
      searchitems : [ {display: 'Login', name : 'login', isdefault: true},
                {display: 'Nome', name : 'nome'} ],
      sortname: “id”, sortorder: “asc”, title: ‘Users table’, width: 520, height: 400 } )

    well.. what I am doing wrong ? how can I know what row was selected when test function is called ?
    sorry about my poor english… is not my native language (I’m brazilian).. and thanks a lot
    ah.. and congratulations about your amazing project…

  • #476 / Jul 19, 2008 1:57am

    swhitlow

    22 posts

    Please note that I have tried the str_replace as well as the json_encode($address) but nothing has worked. Here is what I am getting back through Firebug:

    That is where the problem is. If I go into the database and get rid of that one line, It solves the problem. But, I obviously have to code for the user who might input the one line in there. Even if by accident.

    Try using json_encode like so:

    $rows = array();
        echo "{";
        echo "page: $page,\n";
        echo "total: $total,\n";
        echo "rows: ";
        foreach ($db as $row) 
            {
            $rows[] = array(
            "id"=>$row['pid']
            ,"cell"=> array(
                    '<a href="http://%27.site_url" class="edit">.'"]</a>'
                    ,$row['name']
                    ,$row['shortdesc']."\n Details"
                    ,$row['publish']
                    )
                );
            }
        echo json_encode($rows);
        echo "\n";
        echo "}";

    As you can see i’ve purposely added \n on shortdesc, in case my values doesn’t have \n.
    Please not that json_encode as well as any ajax app, requires utf-8 encoding.

    Just so everyone knows on this board - this worked perfectly. I no longer have the problem of the extra carriage return.

    Thanks!

  • #477 / Jul 20, 2008 1:27am

    millercj

    11 posts

    I’ve been using flexigrid for a few different projects and I recently cut/pasted it into one i’m working on now but i’ve got some sort of glitch that i can’t locate. What is happening is the column headers and the data columns are displaying with different widths. Any ideas?

    I just re-downloaded the CSS from the site and uploaded it as a double check, so it is the original css file, but that made no difference.

  • #478 / Jul 20, 2008 11:40am

    tim_hendo

    1 posts

    I’m a big fan of this code and trying to implement it with a form as in sample1.html on the site. Could I see the source of post3.php so I can see how the page receives the output of serializearray? Or is there a sample page out there that shows it? Thanks!
    Tim Henderson

  • #479 / Jul 20, 2008 2:04pm

    skaimauve

    6 posts

    For those using the YUI comprressor, it will fail on the following line:

    $(this.colCopy).css({position:'absolute',float:'left',display:'none', textAlign: obj.align});

    But works fine with this:

    $(this.colCopy).css({position:'absolute','float':'left',display:'none', textAlign: obj.align});

    The problem is that float is a reserved word and the YUI compressor does not know it is used for an array index.

  • #480 / Jul 20, 2008 6:24pm

    Kevin Kietel

    22 posts