DataGrid with server side pagination should reset the page on sorting/filtering

I am trying to implement a data grid with server-side pagination using a custom data adaptor. 

The issue that I have is that when I apply a filter or sorting then the data grid page should change to the first page.

Currently if I am on the second page for example and then I apply a filter the grid stays on the second page and makes the request to the backend. What I want to change is that after a filtering or sorting is applied then the grid should go to the first page.

I have tried changing the pageSettings.currentPage = 1 inside the actionBegin method and it works with a side effect. It makes two requests because paging action is triggered when I change the currentPage to 1. I want only 1 request to be fired to the server.


Steps to reproduce:

  1. Go to a page different than the first page
  2. Apply filtering or sorting
  3. Notice that two requests are sent to the server (it should only be one request)

Here is a code snippet https://codesandbox.io/s/customdatabinding-forked-0iygm?file=/src/App.vue:1862-1920


1 Reply 1 reply marked as answer

RS Rajapandiyan Settu Syncfusion Team August 5, 2021 12:38 PM UTC

Hi Alex, 
  
Thanks for contacting Syncfusion support. 

Based on your requirement, you want to move the Grid to first page when perform filtering, Sorting, etc., on other pages. We would like to share the default behavior of EJ2 Grid with you. 

When you perform any grid actions like Filtering, Searching, Sorting, Grouping, etc., we send the current page query to the server and maintain the current page in the Grid. This is default architecture of EJ2 Grid. 

If you want to move the Grid to first page, you have to change the currentPage property as 1 in the actionComplete event of Grid and Its sends second api request to the server. We can’t achieve this in single api request. This is the behavior of Grid. 



 
    actionComplete: function (args) { 
      if ((args.requestType === "sorting" || args.requestType === "filtering") && grid.pageSettings.currentPage !== 1) { 
        grid.pageSettings.currentPage = 1; 
      } 
    } 
 


Please get back to us if you need further assistance with this. 
  
Regards,  
Rajapandiyan S 


Marked as answer
Loader.
Up arrow icon