Because I have had to change my code to use datagrid bufferview due to better performance with bufferview. Checkrows no longer works with bufferview (see code below). If I remove bufferview checkrows works.

How to I fix this?

Code:

        dg.datagrid({
            onCheckAll: function() {
                var allRows = $(this).datagrid('getAllRows');
                var state = $(this).data('datagrid');
                
                state.checkedRows = allRows;
            },
            onUncheckAll: function() {
                var state = $(this).data('datagrid');
                state.checkedRows = [];
            }
        }).datagrid('clientPaging');

Hi,

Is there a bufferview extension that working with treegrid with pagination client side?

I tested the bufferview with datagrid and greatly improves the performance when a large number of rows are loaded, but I need it for treegrid.

Lloyd.

I was going to ask the same (1. check All button) question.
I would suggest doing it this way as the pagination function already has all the data.

Code:

        tg.treegrid({
            onCheckAll: function() {
                var allRows = $(this).treegrid('getAllRows');
                var state = $(this).data('datagrid');
                
                state.checkedRows = allRows;
            },
            onUncheckAll: function() {
                var state = $(this).data('datagrid');
                state.checkedRows = [];
            }
        }).treegrid('clientPaging');

Here is my solution:-

Code:

(function($){
    // Pagination
    function pagerTreegridFilter(data) {
        if ($.isArray(data)) {
            data = {  
                total: data.length,  
                rows: data  
            }  
        }

        var tg = $(this);
        var state = tg.data('treegrid');
        var opts = tg.treegrid('options');  
        var pager = tg.treegrid('getPager');
        var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);  
        var end = start + parseInt(opts.pageSize);  
        var topRows = [];
        var childRows = [];

        pager.pagination({
            onSelectPage:function(pageNum, pageSize) {
                opts.pageNumber = pageNum;  
                opts.pageSize = pageSize;  
                pager.pagination('refresh',{  
                    pageNumber: pageNum,
                    pageSize: pageSize,
                });
                
                topRows = [];
                childRows = [];
                
                $.map(data.rows, function(row) {
                    row._parentId ? childRows.push(row) : topRows.push(row);
                });

                $.extend(true, state.allRows.slice(start, end), topRows.concat(childRows));
                tg.treegrid('loadData', state.allRows);
            }  
        });

        opts.pageNumber = pager.pagination('options').pageNumber || 1;

        if (state.allRows) {
            topRows = [];
            childRows = [];
            
            $.map(data.rows, function(row) {
                row._parentId ? childRows.push(row) : topRows.push(row);
            });

            $.extend(true, state.allRows.slice(start, end), topRows.concat(childRows));
        }
        else {
            state.allRows = data.rows;
        }

        if (!opts.remoteSort && opts.sortName) {
            var names = opts.sortName.split(',');
            var orders = opts.sortOrder.split(',');
            state.allRows.sort(function(r1,r2) {
                var r = 0;
                for (var i=0; i<names.length; i++) {
                    var sn = names[i];
                    var so = orders[i];
                    var col = tg.treegrid('getColumnOption', sn);
                    var sortFunc = col.sorter || function(a,b) {
                        return a===b ? 0 : (a>b?1:-1);
                    };

                    r = sortFunc(r1[sn], r2[sn]) * (so==='asc'?1:-1);
                    if (r !== 0){
                        return r;
                    }
                }
                return r;
            });
        }

        topRows = [];
        childRows = [];

        $.map(state.allRows, function(row) {
            row._parentId ? childRows.push(row) : topRows.push(row);
        });

        data.total = topRows.length;
        data.rows = $.extend(true, [], topRows.slice(start, end).concat(childRows));
        return data;
    }

    var appendTreegridMethod = $.fn.treegrid.methods.append;
    var removeTreegridMethod = $.fn.treegrid.methods.remove;
    var loadTreegridDataMethod = $.fn.treegrid.methods.loadData;

    $.extend($.fn.treegrid.methods, {
        clientPaging: function(jq){
            return jq.each(function() {
                var state = $(this).data('treegrid');
                var opts = state.options;
                opts.loadFilter = pagerTreegridFilter;
                var onBeforeLoad = opts.onBeforeLoad;

                opts.onBeforeLoad = function(row,param) {
                    state.allRows = null;
                    return onBeforeLoad.call(this, row, param);
                };

                $(this).treegrid('loadData', state.data);
                if (opts.url){
                    $(this).treegrid('reload');
                }
            });
        },
        loadData: function(jq, data){
            jq.each(function() {
                $(this).data('treegrid').allRows = null;
            });
            return loadTreegridDataMethod.call($.fn.treegrid.methods, jq, data);
        },
        append: function(jq, param) {
            return jq.each(function() {
                var state = $(this).data('treegrid');
                if (state.options.loadFilter === pagerTreegridFilter) {
                    $.map(param.data, function(row) {
                        row._parentId = row._parentId || param.parent;
                        state.allRows.push(row);
                    });
                    $(this).treegrid('loadData', state.allRows);
                }
                else {
                    appendTreegridMethod.call($.fn.treegrid.methods, $(this), param);
                }
            });
        },
        remove: function(jq, id) {
            return jq.each(function() {
                if ($(this).treegrid('find', id)) {
                    removeTreegridMethod.call($.fn.treegrid.methods, $(this), id);
                }
                var state = $(this).data('treegrid');
                if (state.options.loadFilter === pagerTreegridFilter) {
                    for(var i=0; i<state.allRows.length; i++) {
                        if (state.allRows[i][state.options.idField] === id) {
                            state.allRows.splice(i,1);
                            break;
                        }
                    }
                    $(this).treegrid('loadData', state.allRows);
                }
            });
        },
        getAllRows: function(jq) {
            return jq.data('treegrid').allRows;
        }
    });

    function pagerDatagridFilter(data) {
        if ($.isArray(data)) {
            data = {
                total: data.length,
                rows: data
            };
        }

        var dg = $(this);
        var state = dg.data('datagrid');
        var opts = dg.datagrid('options');
        var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
        var end = start + parseInt(opts.pageSize);
        
        if (state.allRows) {
            $.extend(true, state.allRows.slice(start, end), data.rows);
        }
        else {
            state.allRows = data.rows;
        }

        if (!opts.remoteSort && opts.sortName) {
            var names = opts.sortName.split(',');
            var orders = opts.sortOrder.split(',');

            state.allRows.sort(function(r1,r2) {
                var r = 0;
                for(var i=0; i<names.length; i++) {
                    var sn = names[i];
                    var so = orders[i];
                    var col = dg.datagrid('getColumnOption', sn);

                    var sortFunc = col.sorter || function(a,b) {
                        return a===b ? 0 : (a>b?1:-1);
                    };

                    r = sortFunc(r1[sn], r2[sn]) * (so==='asc'?1:-1);

                    if (r !== 0) {
                        return r;
                    }
                }
                return r;
            });
        }

        data.rows = $.extend(true, [], state.allRows.slice(start, end));
        return data;
    }

    var loadDatagridDataMethod = $.fn.datagrid.methods.loadData;

    $.extend($.fn.datagrid.methods, {
        clientPaging: function(jq){
            return jq.each(function() {
                var dg = $(this);
                var state = dg.data('datagrid');
                var opts = state.options;
                opts.loadFilter = pagerDatagridFilter;
                var onBeforeLoad = opts.onBeforeLoad;
                opts.onBeforeLoad = function(param) {
                    state.allRows = null;
                    return onBeforeLoad.call(this, param);
                };
                dg.datagrid('getPager').pagination({
                    onSelectPage:function(pageNum, pageSize) {
                        var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
                        var end = start + parseInt(opts.pageSize);
                        var newData = dg.datagrid('getData');
                        
                        if (parseInt(opts.pageSize) === newData.rows.length) {
                            $.extend(true, state.allRows.slice(start, end), newData.rows);
                        }

                        opts.pageNumber = pageNum;
                        opts.pageSize = pageSize;
                        $(this).pagination('refresh', {
                            pageNumber:pageNum,
                            pageSize:pageSize
                        });

                        dg.datagrid('loadData', state.allRows);
                    }
                });
                $(this).datagrid('loadData', state.data);
                if (opts.url){
                    $(this).datagrid('reload');
                }
            });
        },
        loadData: function(jq, data){
            jq.each(function() {
                $(this).data('datagrid').allRows = null;
            });
            return loadDatagridDataMethod.call($.fn.datagrid.methods, jq, data);
        },
        getAllRows: function(jq){
            return jq.data('datagrid').allRows;
        }
    });
})(jQuery);

I believe I have a solution. I just need a bit more time testing.  

The modified data needs to replace the data stored in state.allRows when pagerFilter() and onSelectPage are called.  

I cannot get Pagination to use the modified data in the datagrid.

I edit the datagrid data (datagrid('updateRow')) and do pagination (clientPaging) the old (unmodified) data is used.

If I force the pager by doing to reload after calling datagrid('updateRow') then pagination not data is displayed and no debug errors.

Code:

                        $('#selections-datagrid').datagrid('updateRow', {
                            index: selectedIndex,
                            row: {
                                NAME: param.NAME,
                                ISPRIVATE: (param.ISPRIVATE === undefined ? 'N' : param.ISPRIVATE)
                            }
                        });
                        
                        var data = $('#selections-datagrid').datagrid('getData');
                        $('#selections-datagrid').datagrid('loadData', data);

Thanks stworthy, all working great
I wished this demo was in the downloads as it would have saved a lot of time.

I have been unable to get paging and sorting working with the built-in functions. The sort function only sorts the visible page and not all the data. I think it needs .allRows add.

My solution:

Code:

        // Custom sort need for pagination
        dg.datagrid({
            onBeforeSortColumn: function(sort, order) {
                var data = $(this).data('datagrid').allRows;
                var opts = $(this).datagrid('getColumnOption', sort);
                
                data.sort(function(a, b) {
                    // Call sort function?
                    if (typeof opts.sorter === 'function') {
                        if (order === "asc") {
                            return opts.sorter.call(this, a[sort], b[sort]);
                        }
                        return opts.sorter.call(this, b[sort], a[sort]);
                    }
                });
                
                $(this).datagrid('loadData', data);
                
                // MUST return false to cancel easyUI sort
                return false;
            }
        });

And I has to modify jquery.easyui.min.js
The datagrid-sort... class is before the call to onBeforeSortColumn

Code:

_645.find("div.datagrid-cell").removeClass("datagrid-sort-asc datagrid-sort-desc");
for(var i=0;i<_640.length;i++){
var col=_614(_63c,_640[i]);
_645.find("div."+col.cellClass).addClass("datagrid-sort-"+_641[i]);
}
if(opts.onBeforeSortColumn.call(_63c,_63f.sortName,_63f.sortOrder)==false){
return;
}

The only problem I have is I am unable to sort on treegrid children.

Please fix the sort and pagination in the EasyUI code.

Thanks, now sorting correctly. 

Here is my directory/file name sorter

Code:

    function nameSorter(a, b) {
        var result = 0;
    
        if (a.is_dir && !b.is_dir) {
            result = -1;
        }
        else if (!a.is_dir && b.is_dir) {
            result = 1;
        }
        else {
            result = ((a.name === b.name) ? 0 : ((a.name > b.name ) ? 1 : -1));
        }

        return result;        
    }

Try Netbeans.

https://netbeans.org/

Thanks for the quick reply.
 
I agree that server side sorting is the answer, but...
Server side sort does not work form me with async data requests.
If I click to expand a node (folder) without sort and order parameters passed to the server all displays ok. If I click on a column to be sorted the server receives id, sort, order with the id (folder) the same as the previous request. Now treegrid displays only the sorted folder the whole tree structure is lost.

[disabled]

This is what I did.

    <div id='toolbar'>
        <a id='upload-button' href='javascript:void(0)' accesskey='u' class='easyui-linkbutton' data-options=\"disabled: 'true', iconCls: 'icon-upload-doc', plain: 'true'\" onclick='upload(\"#contact-tree\")'>Upload </a>
</div>

// Enable on row click
    $(window).load(function() {
        body.bind('click', function(e) {
            $('#upload-button').linkbutton('enable');
        });
    });

If I understand you correctly you what to retrieve data from a variable containing json formatted data.

// json data in result
var json = $.parseJSON(result);

// Node ID
json.ID
// Node name
json.NAME

Hi All,

I have created a file explorer and I need to a custom sort based on the node parent/child. I.e. All folders are parent nodes and files are children.

When sorter callback is used two parameters are passed, but no node information. I.e. sorter:function(a,b){ }

I need something like this (client side):

function sorter($a, $b) {
    global $sort;
    global $order;
   
    $sort_by = empty($sort) ? "" : $sort;
    $order_by = empty($order) ? "asc" : $order;
   
   if ($a['is_dir'] && !$b['is_dir']) {
      $result = -1;
   }
    else if (!$a['is_dir'] && $b['is_dir']) {
      $result = 1;
   }
    else {
      $result = strcmp($a['filename'], $b['filename']);
   }
   
    // Sort order
    if (($result != 0) && ($order_by == "desc")) {
        $result *= -1;
    }
   
    return $result;
}