I want to display a huge data set on data grid, total record count > 100000
For performance consideration, I am trying implement a server side paging, which my API Get method with the below paging params:
getList/{{pageSize}}/{{pageNo}}/other params for filtering and sorting
For pageSize 100, pageNo 1, the API will return records 1 - 100 in the data set
For pageSize 100, pageNo 3, the API will return records 201 - 300 in the data set
For pageSize 50, pageNo 4, the API will return records 151 - 200 in the data set
I will return also total record count in the get method.
By the above API, I have pageSize, pageNo, total record count and records of that page on hand. this is an example return dataset:
JSON{
"pageSize": 100,
"pageNo": 3,
"totalCount": 100000,
"pageRecords": [......]
}
My question is, how can I implement these in DevExtreme Data Grid?
I can pass in the records as data source, I can also set the current page size.
The problem is, I need to modify the "Page information" at the bottom of the data grid, so I can display current page number, total record count and info text correctly? Also when user click on chaging paging info, I need to re-fetch data by new paging info.
Things I need to know:
- How to change Page info - to display page navigation bar at the bottom with my current page using my value
- How to change Page info - to display total record count using my value
- When changing page size, cancel default action, execute my logic so I can fetch data by new page size.
- When changing page info: click navigation button or change current page, cancel default action, execute my logic so I can fetch data by new current page number
Things I want to know (nice to have):
- How to change Page info - info text by my value ("Page 2 of 100, 100000 items")
- When click on header for sorting by column, cancel default action, execute my logic so I can fetch data by new sorting
Please let me know is it possible to do so? if possible please give me guidance how to do so? thanks!
Hello,
Thank you for your code snippets. It looks like you want to process paging settings from the server. In this case, you can notify the DataGrid to let the server handle paging by setting the remoteOperations.paging option to
true
. Please check the remoteOperations reference page, which shows what server-side operations are required when setting a remote operation. This way, the DataGrid displays the required data and data processing settings such as paging information properly.The server should return the data and processing settings in the required format for the DataGrid and other widgets to process it properly. Please check the following guide, which shows the required structure that the server should use to return data and processing settings: Custom Data Sources - Server-Side Data Processing. The following demo also shows how to bind a DataGrid to a custom data source: DataGrid - Custom Data Source.
Alternatively, if you are using a Web API service, consider using our DevExtreme.AspNet.Data extension. This way, the extension automatically handles and formats the data and its processing settings with the required structure. Please check the following demo, which shows how to bind a DataGrid to a Web API service: DataGrid - Web API Service.
As for your other questions, I created separate tickets on your behalf. Please track them for updates:
DataGrid - How to set text of paging info
DataGrid - How to execute custom logic when clicking header for sorting by column
Please let us know if this helps you accomplish your task.
Custom Data Source looks like my best solution, I'll test for it, thanks.
Hello,
You are welcome. Should you have other questions, please feel free to create new tickets that describe them. We will be happy to help you.
Regards,
Angelo