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

[Steve]

Hi,

I have a reactjs GridComponent where I implemented custom webapi paging on.

    <GridComponent

              height={height}

              id={props.viewName + '_Grid'}

              gridLines={'Both'}

              toolbarClick={toolBarClickHandler}

              ref={gridInstance}

              dataSource={listData}

              allowSorting={true}

              allowFiltering={true}

              dataStateChange={dataStateChange}

              dataSourceChanged={dataSourceChanged}

where i use the dataStateChange to do this this works fine

 const dataStateChange = (args: DataStateChangeEventArgs) => {

    const requestType = args.action.requestType;

    let grid = gridInstance.current;

    let selector = {

      pagesize: args.take,

      currentpage: args.skip / args.take,

    } as IViewSelector;

    if (grid) {

      switch (requestType) {

        case 'paging':

          if (currentPage != selector.currentpage) {

            setCurrentPage(selector.currentpage);

            reloadGridFromView(selector);

          }

          break;

        case 'searching':

          const action = args.action as any;

          let query = {};

          if (action.searchString != '') {

          query = { _search: action.searchString };

          }

          selector = {

            pagesize: args.take,

            currentpage: args.skip / args.take,

            query: query,

          } as IViewSelector;

          reloadGridFromView(selector);

          break;

        case 'delete':

          reloadGridFromView(selector);

          break;

        case 'filterchoicerequest':

          break;

      }

    }

  };

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?

thanks

[Vignesh Sivagnanam]

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. 

  

Remote-data: https://ej2.syncfusion.com/react/documentation/grid/data-binding/#remote-data 

  

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 Filter, Page, 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. 

  

Custom-binding: https://ej2.syncfusion.com/react/documentation/grid/data-binding/#custom-binding  

Filter in custom-binding: https://ej2.syncfusion.com/react/documentation/grid/data-binding/#provide-excel-filter-data-source  

  

Demo: https://ej2.syncfusion.com/react/demos/#/material/grid/custom-binding  

  

We have prepared a simple sample based on your requirement. 

  

Sample: https://stackblitz.com/edit/react-joxk2x-dyguwe?file=index.js 

  

Please get back to us if you need further assistance with this. 

  

Regards, 

Vignesh Sivagnanam 

[Venkat]

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

[Pavithra Subramaniyam]

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?

Regards, 

Pavithra S