Pagination

Pagination is an effective technique for customizing the number of items displayed per page and loading data in smaller, manageable segments, thereby improving both performance and user experience.

Pagination is supported by the pageSize and pageOnServer properties provided by the RestCollectionView class. The pageSize property accepts a positive integer value to determine the number of records per page, while the pageOnServer property, when set to true, fetches data in chunks directly from the server.

Pagination integrates smoothly with both standard server-side grouping and group-lazy loading when implementing server-based grouping.  By appropriately configuring the pageSize and pageOnServer properties, RestCollectionView can effectively manage data grouped on the server.

Enabling Pagination

The RestCollectionView class needs to be extended to use the pagination feature. Refer to the Enabling Virtualization documentation for extending the RestCollectionView class and set the this.virtualization property to false.

Let's name the extended class PageRestCollectionView. To enable pagination, add the following code snippet to the _getReadParams() method:

_getReadParams(): any {
        let settings: any = {};
        ...
        // get page params
        if (this.pageOnServer && this.pageSize > 0) {
            settings.skip = this.pageIndex * this.pageSize;
            settings.top = this.pageSize;
        }
        return settings;
    }

Now, the PageRestCollectionView class should be initialized in the following way to get pagination benefits and use the instance of the class as itemsSource for FlexGrid.

let cv =  new VirtualRestCollectionView(url,{
  pageOnServer: true,
  pageSize: 100
});

The above process implements pagination in the RestCollectionView without using the Server-Side Grouping feature.

To enable pagination for standard server-side grouping and grouping with lazy-loading, refer to the following documentation topics based on the grouping feature approach:

• Grouping on Server

• Group Lazy Loading

After implementing the code from the referred grouping topic for group feature implementation, the following code-snippet should be added for _getReadParams() method to enable pagination along with grouping feature.

_getReadParams(...) {
        ...
        // for paginated data
        if (!this.virtualization && this.pageOnServer && this.pageSize > 0 && ((!groupInfo && !this.groupLazyLoading)|| (this.groupLazyLoading && !item))) {
            settings.skip = this.pageIndex * this.pageSize;
            settings.top = this.pageSize;
        }
        return settings;
  }

type=note

Note:

The pagination feature is not supported with virtualization, with or without grouping, as virtualization loads data in chunks similar to pagination.