UrlAdaptor paging

[Ioan Liviu Popa]

Hello, everybody.

Thank you for your efforts.
I replicated the following tutorial from the official Syncfusion, Inc YouTube channel:

Title: How to Perform Server-Side Crud Operations in React DataGrid
URL:
https://www.youtube.com/watch?v=TfqwtSjnQs8&list=PLDzXQPWT8wED_9ejg09Jf7RN9NEslrLzE&index=5

Everything works, except for the pagination. The problem can be visible even in the video 5:52 / 8:24, which uses a pageSize value of 6, yet the grid always displays all 17 records, no matter what.

Any idea how to go about this?

[Hemanthkumar S]

Hi Ioan Liviu Popa,

Greetings from Syncfusion support.

We have validated your query along with the provided video. From our analysis, we noticed that your current implementation only handles returning all the records and performing CRUD operations such as Add, Update, and Delete. However, to enable Grid actions like Paging, Filtering, Sorting, and more, the UrlAdaptor will generate queries that include parameters like “skip” and “take” for paging, “sorted” for sorting, and “where” for filtering. It is essential to address these queries on the server-side and provide the appropriate response to the client. This way, the Grid will display the records correctly. To assist you in understanding this concept better, we have prepared a sample and a video demonstration, both of which are attached below:

Sample: https://stackblitz.com/edit/react-grid-urladaptor-datasource?file=index.js

Let us know if you have any further queries.

Regards,

Hemanth Kumar S

Attachment: URL_Adaptor_demo_38101653.zip

[Ioan Liviu Popa]

Thank you, dear Hemanth.

[Suganya Gopinath]

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

[Ioan Liviu Popa]

Done. Thank you.

[Suganya Gopinath]

We are glad, please get back to us for further assistance when needed. 

We are marking this forum as closed.