Data Grid 2 is the successor to the standard data grid widget for displaying content in a tabular form. It comes with many powerful new features and settings like support for widgets, row and cell coloring, responsive layout, accessibility, and different paging options like virtual scrolling. It offers personalization support so that end-users can show, hide, and re-order columns. The data grid has the option to enable advanced options. When this option is toggled on, it enables numerous features to customize your data grid:
- Pagination type
- Pagination position
- Empty list option
- Dynamic row and cell class
- Column capabilities
- Custom configuration
- Header Filters
In addition to the above-advanced features, we will implement server-side pagination in data grid 2.
Advantages of Server-Side Pagination:
- Can Handle Large data sets.
- Faster initial page load.
Steps to implement in the Data grid 2:
Create a nanoflow as below that returns the above entity.
Create a data view and map the data source to this nanoflow.
Create a snippet with previous and next buttons just like shown in the image below. Then add the snippet inside the data view. The previous and next buttons will have the functionality of navigating the previous and next pages in the grid. You can also have the to show the first and last page buttons.
The data view is as follows:
Now create separate nanaflows for each paging button. Pass the paging parameter as input and based on the required functionality the paging number should be updated. In the following screenshot the page number is changed for the next button/ next page button.
- If you want to navigate to the previous page, create a nanoflow like the above, and in the change object update the page number as follows: $Paging/PageNumber – 1.
- If you want to navigate to the first page, then set the page number to 1.
Now inside the data view, add the data grid 2 and create a microflow.
The microflow should have the paging as an input parameter and it should be used to retrieve the data from the database/entity. The microflow should return the student database list.
Challenges Faced During Implementation:
- We are retrieving the data per page from the microflow. So we won’t be able to know how much data is left to load since we are not retrieving the entire database.
- To overcome the above limitation, while loading the page itself we have calculated the count using Aggregate list operations.
To implement the server-side pagination in an easier way, you need to create the server-side pagination via data grid 1. It will create all the microflows and nanoflows by itself and by default the pagination functionality will be handled. Then you can delete data grid 1 from the page and replace the same with data grid 2 and all the functionalities of the server-side pagination will work as expected in data grid 2.