Custom DataGrid paging (Blazor)link

This guide shows how to create custom DataGrid paging.

Source Code

1. Create new CRUD application from our Sample database and open Orders page.

2. Add Row component below the DataGrid with three Column components with size 4, 4 and 4. In the first column add two Button components to control current page, in the second column add a Label component to display records info and add DropDown component in the third column to control page size.

3. Add a PageSize, Start Count properties in Page Load with 10, 0 and 0 set as values. Set ${PageSize} and ${Count} for the DataGrid PageSize and Count properties and use both as $top and $skip parameters for the data source method invoke in DataGrid LoadData event. Add $filter and $orderby equal to ${event.Filter} and ${event.OrderBy} and execute second data source method invoke to get Count() and set it to Count property.

4. Set ${PageSize} and @(new int[]{10,20,30,40,50}) as DropDown component Value and Data and execute ${grid0.Reload()} on DropDown Change event.

5. Set Showing records from ${this.Start} to ${this.Start + this.PageSize} of ${this.Count} as Label component Text.

6. Set ${Start == 0} as first Button component Disabled, change Start property on Click event to ${this.Start - this.PageSize} with Condition set to ${this.Start - this.PageSize >= 0} and execute ${grid0.Reload()}.

7. Set ${Start >= Count - PageSize} as second Button component Disabled, change Start property on Click event to ${this.Start + this.PageSize} with Condition set to ${this.Start + this.PageSize <= this.Count - this.PageSize} and execute ${grid0.Reload()}.

8. Set AllowPaging to false for the DataGrid component and run the application to change page size and pages.