Custom DataGrid paging (Angular)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 and Start properties in Page Load with 10 and 0 set as values. Set ${PageSize} for the DataGrid PageSize and use both properties for $top and $skip parameters for the data source method invoke in DataGrid LoadData event. Set $count parameter to true and getOrdersCount property to result['@odata.count'].

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

5. Set Showing records from ${this.Start} to ${this.Start + this.PageSize} of ${this.getOrdersCount} 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 this.grid0.load();.

7. Set ${Start >= getOrdersCount - 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.getOrdersCount - this.PageSize} and execute this.grid0.load();.

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