We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to perform filtering, sorting operation using custom service in React Grid


I have a reactjs GridComponent where I implemented custom webapi paging on.
              id={props.viewName + '_Grid'}

where i use the dataStateChange to do this this works fine
 const dataStateChange = (argsDataStateChangeEventArgs=> {
    const requestType = args.action.requestType;
    let grid = gridInstance.current;
    let selector = {
      currentpageargs.skip / args.take,
    } as IViewSelector;
    if (grid) {
      switch (requestType) {
        case 'paging':
          if (currentPage != selector.currentpage) {
        case 'searching':
          const action = args.action as any;

          let query = {};

          if (action.searchString != '') {
          query = { _searchaction.searchString };

          selector = {
            currentpageargs.skip / args.take,
          } as IViewSelector;
        case 'delete':
        case 'filterchoicerequest':


but now when I use the column filter or sort function this does not work for the filter i get an waiting icon when opening and with sort the grid gets a waiting icon

if i try to do the filter

if i try to sort

So how can I do this so that filter and sort work again?


3 Replies 1 reply marked as answer

VS Vignesh Sivagnanam Syncfusion Team June 16, 2021 10:26 AM UTC

Hi Steve 
Greetings from Syncfusion support 
Based on your query we suspect the you want to perform filtering, sorting operation using custom service. If you are using WebAPI service or OData or SQL or any DataTable or List binding in your application, then we suggest you to use Syncfusion inbuilt adaptor of DataManager to perform action on your service. 
You can choose the adaptors based on your Database. Refer to the below documentation which illustrates available data adaptors in EJ2. 
For each Grid data-action like Filtering, Sorting, Paging, scrolling etc., we send the correspond query to the server based on the data-adaptors. You can execute the queries with your data and return results with required format to the Grid.  
While Performing paging it will send the skip and top query to the API and it helps you to improve the performance for large data application. 
If you want to perform all the data action from your own service, then we suggest you use custom-binding feature to achieve this. We would like to share the behavior of custom-binding in EJ2 Grid. 
For every grid action(such as FilterPage, etc.,), we have triggered the dataStateChange event and, in that event arguments we have send the corresponding action details(like skip, take, filter field, value, sort direction, etc.,) based on that, you can perform the action in your service and return the data as a result and count object.  
Note: ‘dataStateChange’ event is not triggered at the Grid initial render. If you are using a remote service, you need to call your remote service by manually with a pagination query (need to set skip value as 0 and take value based on your pageSize of pageSettings in Grid. If you are not defined pageSize in pageSettings, you need to send the default value 12 ) in rendereComplete. Please return the result like as “{result: […], count: …}” format to Grid. 
dataSourceChanged’ event is triggered when performing CRUD action in Grid. You can perform the CRUD action in your service using action details from this event and, you need to call the endEdit method to indicate the completion of save operation. 
We have prepared a simple sample based on your requirement. 
Please get back to us if you need further assistance with this. 
Vignesh Sivagnanam 

Marked as answer

VE Venkat February 28, 2022 04:28 AM UTC

we can scroll is loading in the above demo also. anything missing ? 

PS Pavithra Subramaniyam Syncfusion Team February 28, 2022 09:38 AM UTC

Hi Venkat, 

In our shared sample, the Grid actions like data fetching, sorting is working fine at our end. Could you please share more details that will be helpful for us to validate the exact scenario of the issue and provide a better solution as early as possible? 

  1. Share the pictorial representation of your issue for better understanding
  2. At which action you are facing issue?
  3. Is there any script error?

Pavithra S 

Live Chat Icon For mobile
Up arrow icon