Flexigrid - Lightweight but rich data grid

[eluser]TheJayL[/eluser]
The context menu I am using is from http://www.dynarch.com/products/dhtml-menu/.
Its another script that generates a popup menu for a list based on an Ordered List. I believe there are other popup menu generators out there to actually make a context menu. They key for me though was that the JS to create the menu was being fired on page load, and so it was not binding to rows function on as the list is created by ajax. I had to add an 'onSuccess: "MenuGenerator(Parameters)"', and then at the end of the addData function, after the full XML has been parsed and the list is made i added "eval(p.onSuccess)". I know I am probably not using onSuccess as was intended, but I needed this to fire to onSuccess per se but onComplete, I may change the var name to be more politically correct.

As far as widths and columns I have to use sessions, max security reasons. In fact, I'm not using conventional sessions at all, something a lil more complex for security again, but they can function just like good ol' $_SESSION[]'s. So no to cookies in this case. I am getting what I need by using simple jquery, please keep in mind I am new to jquery so if there is a more eloquent way of coding what I have please let me know, I am no expert:

Code:

//store column order
            var headString = '';
            var headElements = $('thead tr',this.hDiv).children('th');

            for(i=0; i<headElements.length;i++)
            {
              headString += $(headElements[i]).attr('abbr');
              if(i != headElements.length-1) headString +=',';
            }
            setSession('columnorder',headString,0);

This code is at the end of dragEnd() function. So the state is captured everytime user changes something on the page.

setSession is a custom function I have living on every page that fires ajax to set the sessions in the background with a name, the value, and a boolean if the page should reload or not given the new data.

Multi sort-The big thing is sortorder and sortname are now 2 arrays and referenced as such. I changed a lot of little stuff to reflect this.

The new setup js has:

sortname = new Array("col1","col4","col3"),
sortorder = new Array("asc","desc","desc"),

I am having trouble on multi sort getting it to display the arrows for asc, desc on a page reload still so not 100% yet. And like I said, I'm just starting into jquery world so if there is a better way to do the code I have please correct it.

I'll try and get some kinda demo thing once I have got it doing exactly what I need, it will take a while to do, and I'd like to clean my code first.

Also, I can't upload my js file to this forum, too many changes for allowing multi sort to just post code snippets. Everytime sortorder or sortname are referenced I had to make a change for the arrays, but most notibly added:

Code:

changeSortMulti: function(th) { //change sortorder for multi columns

        if (this.loading) return true;

        $(g.nDiv).hide();$(g.nBtn).hide();

        $('div',th).removeClass('sasc');
        $('div',th).removeClass('sdesc');
        if (p.sortname.indexOf($(th).attr('abbr')) == -1)
        {
            p.sortname.push($(th).attr('abbr'));
            p.sortorder.push('desc');
            $('div',th).addClass('sdesc');
        }
        else
        {
          var place = p.sortname.indexOf($(th).attr('abbr'));
          if (p.sortorder[place]=='asc') p.sortorder[place] = 'desc';
          else p.sortorder[place] = 'asc';
          $('div',th).addClass('s'+p.sortorder[place]);
        }

        $(th).addClass('sorted');
        if (p.onChangeSort)
          p.onChangeSort(p.sortname,p.sortorder);
        else
          this.populate();

      },

and changed:

Code:

changeSort: function(th) { //change sortorder for only 1 column

                if (this.loading) return true;

                $(g.nDiv).hide();$(g.nBtn).hide();

                if (p.sortname[0] == $(th).attr('abbr'))
                    {
                        if (p.sortorder[0]=='asc') p.sortorder[0] = 'desc';
                        else p.sortorder[0] = 'asc';
                    }

                $(th).addClass('sorted').siblings().removeClass('sorted');
                $('.sdesc',this.hDiv).removeClass('sdesc');
                $('.sasc',this.hDiv).removeClass('sasc');
                $('div',th).addClass('s'+p.sortorder[0]);
        var temp = p.sortorder[0];
        p.sortorder = new Array();
        p.sortorder[0] = temp;
        p.sortname = new Array();
                p.sortname[0]= $(th).attr('abbr');

                if (p.onChangeSort)
                    p.onChangeSort(p.sortname[0],p.sortorder[0]);
                else
                    this.populate();
            },

as if they arent holding the shift key the array always only has one element at [0]. I havent done anything to onChangeSort as my code always just fires the else populate.

and changed the click of the thead to have:

Code:

$(this).click(
                                function (e)
                                    {
                    if (!$(this).hasClass('thOver')) return false;
                    var obj = (e.target || e.srcElement);
                    if (obj.href || obj.type) return true;

                    //user not using shift, only change one column
                    if(!e[p.sortMultiSortKey]) {
                      g.changeSort(this);
                    }
                    else //user using shift, multi column sort
                    {
                      g.changeSortMulti(this);
                    }
                  }
                            )

So I think I've confused myself, sorry for the long post and feel free to correct.

[eluser]pinkhominid[/eluser]
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.

[eluser]Dsyfa[/eluser]
Hi,

I've written an example in ASP.NET. If anyone is interested it's here http://www.raihaniqbal.org/blog/using-fl...plication/

Enjoy!

[eluser]swhitlow[/eluser]
Hello - I have been using Flexigrid for a while now and have been really liking it! Great job!

I am running into a small problem though. I have a particular field that (in the UI) is a text field. So, it has a carriage return in it.

This carriage return is being saved to the database (MySQL). When I try and display this data in the Flexigrid it just spins and spins. Never returning anything. The data is being posted. I can see it in Firebug. However, the carriage return is there.

On the PHP side of things, I have tried to use str_replace (\n) and str_replace(\r) but to no avail.

Anyway, do you know of anyway I can get around this at all? Any suggestions would be helpful!

Thanks!

[eluser]paulopmx[/eluser]
[quote author="swhitlow" date="1216381117"]Hello - I have been using Flexigrid for a while now and have been really liking it! Great job!

I am running into a small problem though. I have a particular field that (in the UI) is a text field. So, it has a carriage return in it.

This carriage return is being saved to the database (MySQL). When I try and display this data in the Flexigrid it just spins and spins. Never returning anything. The data is being posted. I can see it in Firebug. However, the carriage return is there.

On the PHP side of things, I have tried to use str_replace (\n) and str_replace(\r) but to no avail.

Anyway, do you know of anyway I can get around this at all? Any suggestions would be helpful!

Thanks![/quote]

Try json_encode (a PHP method) to do the escaping for you, it can handle even carriage returns, and you don't even have to remove it.

[eluser]paulopmx[/eluser]
[quote author="Dsyfa" date="1216325333"]Hi,

I've written an example in ASP.NET. If anyone is interested it's here http://www.raihaniqbal.org/blog/using-fl...plication/

Enjoy![/quote]

Great job.

[eluser]paulopmx[/eluser]
[quote author="pinkhominid" date="1216251009"]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.[/quote]

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.

[eluser]swhitlow[/eluser]
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?

[eluser]paulopmx[/eluser]
[quote author="swhitlow" date="1216385613"]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?[/quote]

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

[eluser]swhitlow[/eluser]
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" ) . "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);