Question

I am using jqgrid treegrid to load the data remotely on expand event. It is retrieving the data fast but it is taking time to load on client side and also on collapsing the node, it is giving stop script error on IE8. On FF and Chrome, it does take time but works with out any script errors. I only have 480 records to display but treegrid shows huge performance drawback. IE8 error on collapsing FEB-2012 node…

Answer 1

I tested your demo and I have one tip hot to improve the performance dramatically. The reason are the line inside of expandRow:

$("#"+id,$t.grid.bDiv).css("display","");

and another line inside of collapseRow:

$("#"+id,$t.grid.bDiv).css("display","none");

The lines uses $t.grid.bDiv as the jQuery context parameter. It follows that the data from $t.grid.bDiv fill be searched without using the index existing for ids. In case of the grid has no id duplicates (which would be a bug in the data) one can remove the $t.grid.bDiv parameter

The demo is identical to your original demo, but I used the fixed code of the function where the above lines are replaced to

$("#"+$.jgrid.jqID(id)).css("display","");

and

$("#"+$.jgrid.jqID(id)).css("display","none");

I used the original jqGrid 4.1.1 jquery.jqGrid.min.js, but overwrote the code only the expandRow and collapseRow function with

$.jgrid.extend({
    expandRow: function (record){
        this.each(function(){
            var $t = this;
            if(!$t.grid || !$t.p.treeGrid) {return;}
            var childern = $($t).jqGrid("getNodeChildren",record),
            //if ($($t).jqGrid("isVisibleNode",record)) {
            expanded = $t.p.treeReader.expanded_field;
            $(childern).each(function(i){
                var id  = $.jgrid.getAccessor(this,$t.p.localReader.id);
                //$("#"+id,$t.grid.bDiv).css("display","");
                $("#"+$.jgrid.jqID(id)).css("display","");
                if(this[expanded]) {
                    $($t).jqGrid("expandRow",this);
                }
            });
            //}
        });
    },
    collapseRow : function (record) {
        this.each(function(){
            var $t = this;
            if(!$t.grid || !$t.p.treeGrid) {return;}
            var childern = $($t).jqGrid("getNodeChildren",record),
            expanded = $t.p.treeReader.expanded_field;
            $(childern).each(function(i){
                var id  = $.jgrid.getAccessor(this,$t.p.localReader.id);
                //$("#"+id,$t.grid.bDiv).css("display","none");
                $("#"+$.jgrid.jqID(id)).css("display","none");
                if(this[expanded]){
                    $($t).jqGrid("collapseRow",this);
                }
            });
        });
    }
});

I think that one can more improve performance of the code, but at least the simple change can improve dramatically the performance of collapsing or expanding of tree nodes having many items.

UPDATED: I posted just now the pull request which fix the described above problem in the main code of jqGrid. I decided to use $($t.rows.namedItem(id)) instead of described above $(“#”+$.jgrid.jqID(id)). I didn’t measure the performance exactly, but the usage of namedItem should be the most close to the original jqGrid code and I hope it works a little more quickly as id selector of jQuery.

UPDATED 2: The fix is now in the main code of jqGrid on the github (see here)