2

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...

enter image description here

varaprakash
  • 487
  • 4
  • 12
  • 30

1 Answers1

3

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)

Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Oleg: Excellent! can't thank you enough. Performance is definitely a lot better now... – varaprakash Mar 06 '12 at 13:02
  • @varaprakash: You are welcome! I see that the current code of TreeGrid can be improved much more for the better performance, but I hope that I found the bottleneck which you had. I spend about 10 minutes to find the problem and to fix it. Much more time took the writing of the answer :-). In any way you can see on the example that having full working demo which reproduce the problem which you have speed up the solving of the problem. Best wishes! – Oleg Mar 06 '12 at 13:14
  • Yes, I have seen the demo. Your demos are always helpful and I am sure this issue might be faced by most of treegrid users and this example definitely helps many. Thank you again! – varaprakash Mar 06 '12 at 13:26
  • @varaprakash: You are welcome! In the last my comment I mean the demo which *you created* and which could be used to reproduce the problem. Only because I had the demo I could quickly solve the problem which you described. – Oleg Mar 06 '12 at 13:36
  • Oleg: Is it possible to display the ajax loading message near the expanded row? The reason is if the grid has so much data, on expanding the row, it displays loading.. msg in the middle which is not visible to the users indicating that some operation is happening, any suggestions please? I will post a question for this if you would want me to do so? Thank you... – varaprakash Mar 06 '12 at 16:25
  • @varaprakash: Nothing is impossible. Look at [the answer](http://stackoverflow.com/a/8778241/315935) which is helpful in case of large grid. You can change the way how you calculate 'top' and 'left' to implement your requirements, but probably the current solution is already OK. – Oleg Mar 06 '12 at 16:33
  • Oleg: Thanks a lot, I tried this solution but some how it did not work for me. May be I am missing something, not sure. Do you have any demo for the same, would appreciate it... – varaprakash Mar 13 '12 at 15:26
  • @varaprakash: You are welcome! In [the bug report](http://www.trirand.com/blog/?page_id=393/bugs/slow-performance-of-treegrid-on-collapse-or-expand/#p26091) which I posted to trirand and which is still not answered I included links to [the demo](http://www.ok-soft-gmbh.com/jqGrid/treegrid0.html) which can be used to reproduce slow performance in collapsing/expanding the tree nodes and [the demo](http://www.ok-soft-gmbh.com/jqGrid/treegrid.html) which uses my bug fix. – Oleg Mar 13 '12 at 15:33
  • Oleg: Could you please take a look at this [question](http://stackoverflow.com/questions/9686944/fixing-column-headers-while-scrolling-jqgrid) when you get a chance, thanks... – varaprakash Mar 13 '12 at 16:52
  • Oleg: I think there was a confusion. I was actually referring to this [solution](http://stackoverflow.com/questions/8777793/how-to-center-the-loading-data-message-in-the-visible-screen-in-jqgrid-tre/8778241#8778241) for displaying loading... message in the middle of the page. This solution was not working for some reason, wondering if you have a demo for the same? Thanks... – varaprakash Mar 13 '12 at 17:32
  • @varaprakash: Oh... I answered on many questions and jump from one to another. Sorry! Next time please write the comment to the my answer which mostly corresponds to your question. See [the demo](http://www.ok-soft-gmbh.com/jqGrid/LoadingInCenter.htm). I placed the code in the demo **outside** of `loadComplete` only to have "Loading" div permanently be seen. – Oleg Mar 13 '12 at 17:49
  • @Oleg The performance increase is amazing :) Thanks so much...this was all that was keeping me from using JQGrid Treegrid in production. Do you plan to incorporate your enhancement into the official JQGrid source? – woggles Mar 22 '12 at 13:00
  • @woggles: The problem is that I am **not official developer of jqGrid**. I just used jqGrid 2 years before and I started to help other. I posted many suggestions to trirand, but I know Tony not better as know you. I posted my suggestion [here](http://www.trirand.com/blog/?page_id=393/bugs/slow-performance-of-treegrid-on-collapse-or-expand/#p26091) and reminded about the problem in "P.S." part of [another post](http://www.trirand.com/blog/?page_id=393/bugs/bugs-in-addrowdata-delrowdata-and-setrowdata-if-idprefix-is-defined-and-the-data-are-local/#p26173). – Oleg Mar 22 '12 at 16:53
  • @woggles: Probably I will start next to post my replacements to some methods [here](https://github.com/OlegKi/jqGrid-plugins), but I don't really want to create my own modification of jqGrid at least because I did all that for free only and don't want more support questions. – Oleg Mar 22 '12 at 16:54
  • @Oleg ah for some reason I forgot that JQGrid isn't open source! Thanks again for all your efforts in helping people to use it, improving it and reporting bugs to the devs. – woggles Mar 22 '12 at 21:56
  • @woggles: You are welcome! jqGrid has [open source](https://github.com/tonytomov/jqGrid), but it's not good to develop two versions of it. If the situation will not better and I will find enough time I will probably have to do this, but I still hope that it will be not needed. – Oleg Mar 22 '12 at 22:04
  • @woggles: I posted additionally the pull request which fix the described problem. See **UPDATED** part of my answer. – Oleg Mar 24 '12 at 20:07
  • @varaprakash: I posted additionally the pull request which fix the described problem. See **UPDATED** part of my answer. I hope that Tony do fix the problem in the main jqGrid code. – Oleg Mar 24 '12 at 20:08
  • @woggles: The fix is now [committed](https://github.com/tonytomov/jqGrid/commit/752c430cf45c0ad372b2b2f61af4acae4a92ec1d). – Oleg Mar 26 '12 at 11:42
  • @varaprakash: The fix is now [committed](https://github.com/tonytomov/jqGrid/commit/752c430cf45c0ad372b2b2f61af4acae4a92ec1d). – Oleg Mar 26 '12 at 11:43
  • @Oleg: Thanks a lot! Is this fix going in the latest release, could you please tell me which version should I upgrade to, for this fix? – varaprakash Mar 26 '12 at 16:23
  • @varaprakash: the next version which will published after jqGrid 4.3.1 will have the fix inside. You can download now the developer version of jqGrid from [github](https://github.com/tonytomov/jqGrid). The version in not minimized and you should include all modules separately (see [the documentation](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:how_to_install#development_installation)). The `jquery.jqGrid.src.js` file is just concatenation of modules. You can open `jquery.jqGrid.min.js` and see in the comment after "Modules: " the exact order of modules. – Oleg Mar 26 '12 at 16:34