Paging in Blazor Grid
When you have large data, you can use paging to divide the data in multiple pages and increase overall performance of the IntegralUI Grid component for Blazor .NET by loading data on demand. In this document, you will learn how to enable paging in Blazor Grid, handle page change events, navigate through pages from code and create server side pagination.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
This example shows how to load data from a JSON file and divide it in multiple pages. You can set the page size, which determines the maximum number of rows per page. You can navigate through grid data using pagination buttons or through code by using these built-in methods and events.
How to Enable Paging in Blazor Grid
The IntegralUI Grid component has built-in support for pagination. You can setup paging to work by setting the following:
- AllowPaging - determines whether paging is enabled, default is false
- MaxPages - the maximum number of pages available, default is 1
- PageSize - number of records per page, default is 100
- ShowPagingPanel - determines whether paging component is displayed at grid bottom, default is true
Depending on pagination settings, the Grid component will divide the data in multiple pages. In this example, because of dynamic grouping enabled page size is set to 5 records per page:
The page size determines the number of root rows displayed per page, it doesn't count child rows that appear in each group.
When creating your own paging navigation functionality by providing your own Paging component or handling pagination from code, you can hide the built-in paging panel by setting the ShowPagingPanel property to false.
Paging Events
Whenever current page changes in the Blazor Grid component, the PageChanged event will fire. You can handle this event in your code and add specific actions. The event data includes the following:
- MaxPages - the number of pages currently present in the Grid
- Page - the page currently displayed
- PageSize - the number of records per page
Page Navigation from Code
Instead of using the pagination panel that appears at the bottom of the grid component, you can navigate through pages from code. For page navigation these properties and methods are available:
- CurrentPage - Gets or sets the number of a page currently visible in the grid
- FirstPage - the first page is shown in the grid
- LastPage - the last page is shown in the grid
- NextPage - moves to the next page
- PrevPage - moves to the previous page
These methods are useful, for example to quickly move to a specific page from code. Initially, you can set the Grid component to display a specific page during first load. Based on specific data that you want to display which is already present in the Grid, you can find the page that contains that record and move to that page from code.
Server Side Paging
To increase performance of the Blazor Grid component and when you want to load data on demand into the grid, you can use server side paging. For this purpose, you need handle paging on your side, by first providing the following:
- Enable paging
- Specify the number of records per page
- Handle the PageChanged event where you can load data on demand
At first you can load only the data for the first page. Then when next page button is clicked, and the current page changes you can load additional data.
Conclusion
Pagination allows you to increase overall performance of the Blazor Grid component by loading data on demand. You can divide the grid data in multiple pages and navigate through them either by using the built-in paging panel or by creation your own page navigation. In addition, you can create server side paging, where new data is loaded whenever the next page button is clicked.
IntegralUI for Blazor is an UI library of native components that includes the Blazor Grid component. You can use it to develop web apps in Blazor .NET framework.