Ticket T1001940
Visible to All Users

DataGrid - How to add server-side paging

created 4 years ago (modified 4 years ago)

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:

  1. How to change Page info - to display page navigation bar at the bottom with my current page using my value
  2. How to change Page info - to display total record count using my value
  3. When changing page size, cancel default action, execute my logic so I can fetch data by new page size.
  4. 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):

  1. How to change Page info - info text by my value ("Page 2 of 100, 100000 items")
  2. 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!

Comments (3)
DevExpress Support Team 4 years ago

    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.

    DD DD
    Delphi Developer 4 years ago

      Custom Data Source looks like my best solution, I'll test for it, thanks.

      DevExpress Support Team 4 years ago

        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

        Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

        Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.