Print Page - Client pagination in TreeGrid

Title: Client pagination in TreeGrid
Post by: zolotoy on July 02, 2015, 10:33:53 AM

I am trying to implement pagination in my TreeGrid. Here is relevant code:

Code:

<div style="height:900px">
    <table id="tg" easyui-treegrid ng-model="data" fit="true"
           data-options="
				idField: 'id',
				treeField: 'name',
                rownumbers: true,
                pagination: true,
                pageNumber: 1,
                pageSize:30
			">
    </table>
</div>

and my controller:

Code:

alarms.directive('easyuiTreegrid', function () {
    return {
        restrict: 'AE',
        require: 'ngModel',
        link: function (scope, elem, attrs, ngModel) {
            $(elem).treegrid();
            $(elem).datagrid({
                   columns: [[
                       { field: 'name', title: 'Name' },
                       { field: 'category', title: 'category' },
                       { field: 'eventlatest', title: 'Event Latest', formatter: scope.formatDate }
                   ]]
            });
            ngModel.$render = function (value) {
                $(elem).treegrid('loadData', ngModel.$viewValue);
            }
        }
    }
});

I get a pager control on the bottom that shows 30 for a page size and Page 1 of 4 which is correct because I have 93 rows. But when I click on Next button nothing happens.
Also I have a vertical scroll bar which shouldn't be there since I have pages.

Please, help. Thanks

Title: Re: Client pagination in TreeGrid
Post by: stworthy on July 02, 2015, 06:02:36 PM

If you are using treegrid, please use the code below instead.

Code:

alarms.directive('easyuiTreegrid', function () {
    return {
        restrict: 'AE',
        require: 'ngModel',
        link: function (scope, elem, attrs, ngModel) {
            $(elem).treegrid({
               columns: [[
                   { field: 'name', title: 'Name' },
                   { field: 'category', title: 'category' },
                   { field: 'eventlatest', title: 'Event Latest', formatter: scope.formatDate }
               ]]            
            });
            ngModel.$render = function (value) {
                $(elem).treegrid('loadData', ngModel.$viewValue);
            }
        }
    }
});

Title: Re: Client pagination in TreeGrid
Post by: zolotoy on July 03, 2015, 02:50:38 PM

The only difference in code that you are providing in this line:
$(elem).treegrid();
I have removed that line but the pager still doesn't do anything when I click on the next page button.

Title: Re: Client pagination in TreeGrid
Post by: stworthy on July 03, 2015, 07:07:07 PM

The client side pagination requires you to call 'clientPaging' method after creating the treegrid successfully. Please refer to this example http://www.jeasyui.com/demo/main/index.php?plugin=TreeGrid&theme=default&dir=ltr&pitem=Client%20Side%20Pagination

Title: Re: Client pagination in TreeGrid
Post by: zolotoy on July 04, 2015, 08:48:17 AM

But I am also looking into http://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&theme=default&dir=ltr&pitem=
and dont see clientPaging being specified. All I want is a basic paging functionality.

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: zolotoy on July 02, 2015, 10:33:53 AM