Data Grid 2 is the successor of Data Grid 1. It is used to displaying content in a tabular form. By default, it comes with many new features and settings that includes the support for external widgets, paging options, virtual scrolling, responsive design etc. The columns can be resized, and it supports to show and hide or re-order the columns. The Data grid have many advanced options which includes as follows:

• Pagination type
• Pagination position
• Empty list option
• Dynamic row and cell class
• Column capabilities
• Custom configuration
• Header Filters

Also read: Top 3 Low Code Business Solutions for Small- To Medium-Sized Enterprises

In addition to the above features, we will implement the server-side pagination in the data grid 2.

Advantages of Server-Side Pagination:

• Can Handle Large data sets.
• Faster initial page load.
• Network Latency is reduced with improved load time.

Steps to implement in the Data grid 2:

• Create an entity with the system.paging as a generalization.

•  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 buttons 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, the 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.

Add-ons:

 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.

Read our Server-Side Pagination in Mendix blog to get more details