The pagination is not updated when trying to refresh the grid

[julie4754]

We have created a web page which uses external server side pagination so that the client side only loads the current page of data.

While a user is viewing a page, they can click on a custom refresh icon to fetch refreshed data from the server. This refresh may add and/or take away rows from the total and the total may change.

We have set the following key grid options:

                        paginationPageSizes: [5, 10, 20, 30, 50],
                        paginationPageSize: initialPageSize,
                        useExternalPagination: true,                        
                        useExternalSorting: true,
                        enableColumnResizing: true,
                        enableGridMenu: true,
                        minRowsToShow: initialRowsToShow,

We have registered the api to call custom code to fetch the data:

gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) {
                                paginationOptions.pageNumber = newPage;
                                paginationOptions.pageSize = pageSize;
                                self.refreshListComponent(newPage, pageSize, false);
                            });

And the refresh icon calls does similar as:

self.refreshUiGrid = function() {
                    self.refreshListComponent(paginationOptions.pageNumber, paginationOptions.pageSize, false);
                }

where refreshListComponent is:

self.refreshListComponent = function (pageNumber, pageSize, initialiseGrid){
                //pagination is only implemented for softentity component
                //for alerts and messages component, the page and size will be undefined until we implement the pagination
                    if (!pageNumber) {
                        paginationOptions.pageNumber = pageNumber;
                        paginationOptions.pageSize = pageSize;
                    }
                    getAndPopulateListData(pageNumber, pageSize, initialiseGrid);
                }

And getAndPopulateListData is:

function getAndPopulateListData(page, pageSize, initialiseGrid) {
                    var params = {
                        dashboardId : self.dashboardId,
                        componentId : self.component.id,
                        summaryView : false,
                        loadData : true,
                        pageNumber : page,
                        pageSize : pageSize };

                    if (paginationOptions.sortField != null) {
                        params.sortField = paginationOptions.sortField;
                        params.sortDirection = paginationOptions.sortDirection;
                    }

                    $http.get('/dashboard-ui/dashboard-data/dashboard-data/listData', {
                        cache : false,
                        params: params
                    }).then(
                        function(response) {
                            if (response.data.status == 'Success') {
                                self.totalItems = response.data.result.totalCount;
                                self.totalPage = Math.ceil(self.totalItems / pageSize);
                                self.componentData = response.data.result;
                                if (self.component.showLastUpdated) {
                                    if (initialiseGrid)
                                        self.timeAgo = timeAgo.init('#lastUpdated' + self.component.id, new Date().getTime());
                                    else
                                        self.timeAgo.update(new Date().getTime());
                                }
                                if (initialiseGrid) {
                                    self.gridOptions.totalItems = self.totalItems;
                                    self.gridOptions.paginationCurrentPage = page;
                                    self.gridOptions = getGridOptions();
                                } else {
                                    $timeout(function() {
                                        self.gridOptions.totalItems = self.totalItems;
                                        self.gridOptions.paginationCurrentPage = page;
                                    });
                                    var data = [];
                                    angular.forEach(self.componentData.rows, function(row, idx) {
                                        data.push(row);
                                    });
                                    self.gridOptions.data = angular.copy(data);
                                }
                            }
                            else
                                uleaf.msgBox(response.data.message, uleaf.warn);
                        }
                    );
                }

As the code was setting the total number of items, we expected the default pager template to contain an updated '1 - 10 of 1886 items' with the updated total and if the user is on the last page and there is a new row, this section to change from '1881 - 1886 of 1886 items' to '1881 - 1887 of 1887 items' when the fetch of updated data included a now row. The grid data does show the correct rows, but the pager is out of date even though the totalItems was updated. A trace of this scenario shows that although the grid pager shows '1881 - 1886 of 1886 items', the value of totalItems is in fact 1887.

Similarly, if the user is on the second to last page and then clicks on the next page icon, the total number of items is not updated even though debugging shows that the totalItems variable was updated.

Is there a defect here that updating the totalItems is not updating the pager? We have looked at the tutorials and API, but cannot find anything to address this issue.

[julie4754]

This may be related to #6897. Although the scenario I have given is not client side filtering, the scenario is similar in that the pager is showing incorrect row numbers and totals when the data on display has been updated/refreshed.

[julie4754]

Close the issue as I created a plunkr and found that it was working in the plunkr which gave an indication that this should work.