Treegrid - slow rendering and loading, concerning the tree's size

[amir-t]

Hi,

i'm using Tree-grid in chrome browser, with the dynamic loading methodology (using the 'loader' callback).
We have a serious performance problem with the treegrid, and we noticed that the slow rendering performance is getting worst when more child rows are added to the tree (by expanding parents rows).

It's important to emphasize that our tree-grid size contains about 10-40 rows in every tree level, and generally our tree's total size is about 100-200 rows, which is not a lot.

In addition, in order to find our bottleneck in the slow performance issue, we limited our server's response to a maximum 5 rows for each request (by the dynamic loading), and we found that the loading\rendering started to be slow when we expanded 8-10 rows from different depth levels.where each row can hold maximum of 5 child's rows.

How can we solve this performance problem? Is there a way we can improve the treeGrid rendering performance?

Thanks in advance.

[stworthy]

To improve tree grid performance, set 'autoRowHeight' to false, 'rownumbers' to false and prevent from using 'frozenColumns' property. Please refer to the attached example. The tree grid loads more that 900 rows and runs quickly.

[amir-t]

Thanks a lot 

We'll try this specifications, hope it will improve our treeGrid performance.

[tomhj]

I'm having the same problem.  I have tried specifying 'autoRowHeight' false, 'rownumbers' false and I'm not using any frozen columns - but performance is still not good.

I'm using the latest 1.4 version of jQuery EasyUI.  My grid has 17 visible columns and a few hidden columns and then only about 200 rows in it

When I expand (or contract) a node that is already loaded into the tree, it is taking 10+ seconds.  Using Chrome's dev tools and the CPU profiling, I see that the most time is spent in the autoSizeColumn function in datagrid (inherited by treegrid). 

I'm wondering why it has to re-auto size the columns when expanding/collapsing tree nodes in the tree?  In my application, the treegrid columns don't need to be resized in those cases.

Is there a way I can override the autoSizeColumn function so it does nothing during expand/collapse operations but works when the treegrid first loads?

thanks,
Tom

[tomhj]

I figured out how to do this and it did make a big difference in performance for my app's treegrid.  Here is what I did:

Extend the 'autoSizeColumn' method for the treegrid:

Code:

var origTreegrid_autoSizeColumn = $.fn.datagrid.methods['autoSizeColumn'];
$.extend($.fn.treegrid.methods, {
    autoSizeColumn: function(jq, field) {
        $.each(jq, function() {
            var opts = $(this).treegrid('options');
            if (!opts.skipAutoSizeColumns) {
                var tg_jq = $(this);
                if (field) origTreegrid_autoSizeColumn(tg_jq, field);
                else origTreegrid_autoSizeColumn(tg_jq);
            }
        });
    }
});

Then when I setup my treegrid, set skipAutoSizeColumns to 'false' and install handlers to track the expand/collapse operations:

Code:

$('#tg').treegrid({
    fit: true,
    url: 'getMyData',
    skipAutoSizeColumns: false,
    onBeforeExpand: function() {
        $(this).treegrid('options').skipAutoSizeColumns = true;
    },
    onBeforeCollapse: function() {
        $(this).treegrid('options').skipAutoSizeColumns = true;
    },
    onExpand: function() {
        $(this).treegrid('options').skipAutoSizeColumns = false;
    },
    onCollapse: function() {
        $(this).treegrid('options').skipAutoSizeColumns = false;
    }
});

       
The result is the 'autoSizeColumns' method is called normally when the grid data is loaded to get the column sizing initialized properly - but then expanding/collapsing nodes is *much* faster and more responsive -- even if the data needs to be fetched from the server to fill in the children nodes.