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.

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

In my app, I customize the icons to display something more appropriate for my app.  To do this, provide an "iconCls" value for each node/row in your tree.

The iconCls contains the CSS class name that defines the icon like "icon-pdf" and this CSS style:

.icon-pdf { background:url('images/pdf.png') no-repeat; }

Has anyone tried using jQuery EasyUI as the view component within an Ember.js web application?

I'm considering it for a project but I'm concerned about how the two would play together with EasyUI's handling of heavy-data components like datagrid and treegrid with virtual pagination.  My app deals with a lot of data and it makes heavy use of those features.  Ember.js seems to want to control handling the data and fetching it from the server when needed.

thanks,
Tom

Thanks - works fine now.

I'm using the scrollview extension to support server-based virtual pagination through a large data set.  This works fine on FireFox and Chrome but on IE8, only the first page of data is shown with no way to scroll to see the next page.

This same problem happens with the "Virtual Scroll View" demo page.  In that demo, you can only scroll through the first 50 rows of data.  I don't see any javascript errors.

I'm using jQuery EasyUI version 1.3.6, jQuery version 1.11.1 and of course the browser is IE8.  For other browsers, my app uses jQuery 2.1.1.  I see your demo app is using jQuery 1.8.0.

Is there any way to work around this problem?

thanks,
Tom

I'm all set now running the commercial version with the jquery.easyui.all.js file.

thanks,
Tom

I do have a commercial license and renewed the maintenance on 8/19/2013.  I very well may have gone to the "regular" download page to download version 1.3.6 because I couldn't find the email you sent when 1.3.6 came out. 

How can I get that link to download that commercial version now?

thanks,
Tom

In versions prior to 1.3.6, I could change from using jquery.easyui.min.js to jquery.easyui.all.js so that I could debug my calls into the EasyUI library.  But that jquery.easyui.all.js file seems to be missing in version 1.3.6.

Can it be added back?

thanks,
Tom

Finally got back to working on this...

The problem turned out to be fixed in the latest scrollview.

Thanks,
Tom

That only works because the loadData call passes the entire array of 8,000 rows.

I changed the example to hook up a real backend using the 'url' property to fetch the data one page of 50 rows at a time.  After row 50, it does not work anymore.

I'm using the scrollview view for virtual scrolling through a large dataset.  I need to update a row using the updateRow method which takes an index and the new row data.

What I'm finding is this works fine for the first page full of rows (first 40 rows), but as soon as I try to update a row in a subsequent page (say row 45), I get errors inside scrollview's renderRow method.  I tracked it down in a debugger to a problem with datagrid's getRows method only returning the first page full of rows - only the first 40 it seems.  But rowIndex is 45 so a reference to rows[rowIndex] causes problems.

I think what is needed is for the datagrid to support a getRow method that takes the index and returns the row of data.  Relying on getRows[rowIndex] to get the row doesn't work when virtual paging is used.  getRow would need to call into the view to get the data row.  Clearly there are two cases:  a) row is present in the current page of data and b) row is not.  First case is easy, second is not because it would involving a request to fetch the page of rows containing the requested rowIndex - which of course would not be synchronous.

Is there another way to do this that I'm not seeing?

Works like a charm - thanks!

I'm trying to use the new scrollview2 to have virtual scrolling along with row detail drill-down.  The "Virtual Scroll View(Detail Rows)" is very close.  But what I found is the row expander icons/links do not show up unless you have rownumbers set to true.  The exact same code with rownumbers:false and using "view: detailview" works (but without the virtual scrolling).

scrollview2 works as long as rownumbers:true is set.

To prove this, I recreated the source from the "Virtual Scroll View (Detail Rows)" example:

Code:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/datagrid-scrollview2.js"></script>

</head>
<body>
<div style="margin-bottom:10px">
    <select onchange="load(this.value)">
        <option value="remote">Load Remote Data</option>
        <option value="local">Load Local Data</option>
    </select>
    <table id="tt" title="DataGrid - VirtualScrollView with Detail Rows" style="width:700px;height:300px" data-options="
                view:scrollview2,rownumbers:true,singleSelect:true,
                url:'datagrid27_getdata.php',
                autoRowHeight:false,pageSize:50">
        <thead>
        <tr>
            <th field="inv" width="80">Inv No</th>
            <th field="date" width="90">Date</th>
            <th field="name" width="80">Name</th>
            <th field="amount" width="80" align="right">Amount</th>
            <th field="price" width="80" align="right">Price</th>
            <th field="cost" width="90" align="right">Cost</th>
            <th field="note" width="100">Note</th>
        </tr>
        </thead>
    </table>
    <script type="text/javascript">
        $(function(){
            $('#tt').datagrid({
                detailFormatter: function(rowIndex, rowData){
                    return '<table><tr>' +
                            '<td style="border:0;padding-right:10px">' +
                            '<p>Name: ' + rowData.name + '</p>' +
                            '<p>Amount: ' + rowData.amount + '</p>' +
                            '</td>' +
                            '<td style="border:0">' +
                            '<p>Price: ' + rowData.price + '</p>' +
                            '<p>Cost: ' + rowData.cost + '</p>' +
                            '</td>' +
                            '</tr></table>';
                }
            });
        });
        function loadLocal(){
            var rows = [];
            for(var i=1; i<=8000; i++){
                var amount = Math.floor(Math.random()*1000);
                var price = Math.floor(Math.random()*1000);
                rows.push({
                    inv: 'Inv No '+i,
                    date: $.fn.datebox.defaults.formatter(new Date()),
                    name: 'Name '+i,
                    amount: amount,
                    price: price,
                    cost: amount*price,
                    note: 'Note '+i
                });
            }
            $('#tt').datagrid('loadData', rows);
        }
        function load(mode){
            if (mode == 'local'){
                loadLocal();
            } else {
                $('#tt').datagrid({
                    url:'datagrid27_getdata.php'
                });
            }
        }
    </script>
    <style type="text/css">
        .datagrid-header-rownumber,.datagrid-cell-rownumber{
            width:40px;
        }
    </style>
</div>
</body>
</html>

Note:  The 'Load Remote Data' doesn't work in my example because of the browser blocking the AJAX request to fetch data due to same-origin.  But it works for the 'Load Local Data'.

All I need to is change "rownumbers:true" to "rownumbers:false" and the row expander icon is not displayed and doesn't work any more.

Any suggestions?

That fix works nicely for me - thanks!

I found another problem though with scrollview2 for virtual scrolling with detail expansion - I'll start another post for that one.