How to get dataSource after filtering, sorting

[Ton That Hung]

Hi Syncfusion team,
I'm using Grid component and I have a need is get all data grid after filtering, sorting.

Example:

Expected: get all data showed on Grid (image)
Link: https://stackblitz.com/edit/react-ta71qb?file=index.js
Are there any way to reach my requirement?

Thanks.

[Joseph Christ Nithin Issack]

Hi Ton,

  Greetings from Syncfusion support.

  Based on your query, you want to get the filtered records. Your requirements can be achieved by calling the getFilteredRecords method of the EJ2 Grid.

  Documentation: https://helpej2.syncfusion.com/react/documentation/api/grid/#getfilteredrecords

Regards,

Joseph I.

[Ton That Hung]

Hi Joseph,

Seem like if I don't filter in grid, getFilteredRecords ​will return empty array.

Are you have the way to control this problems?

Thanks.

[Joseph Christ Nithin Issack]

Ton,

  Before proceeding with the solution, we would like you to share the below details.

• Complete grid rendering code.
• Details on where you have used the `getFilteredRecords` method.
• Video demo of your requirement.

[Ton That Hung]

Hi Joseph,

In my example: I have the getDataSource button, if you click on this button, the console will show the dataSource.
If I have filtered, the console would be shown true.
But If I haven't filtered, the console only show empty array.

Link: https://stackblitz.com/edit/react-ta71qb-35neud?file=index.js

Didn't filter + sorted:

Filtered + sorted:

I want to get the dataSource that is showing on the grid when I have sorted but not filtered.

Thanks.

[Joseph Christ Nithin Issack]

Ton,

  Based on your query, you want to get the data when you perform either sorting or filtering. On inspecting the sample provided, you are using url adaptor for fetching the data for the grid. When you are using remote data, you have access to only the current view data. You can get the current view data using the ‘grid.getCurrentVirewRecords’ method.

Please refer the below code example.

 

  async function getDataSource() {

    console.log('DataSource:', await gridInstance.getCurrentViewRecords());

  }

 

Using which you can get the data in the current page viewport.

Note: you have also enabled virtualization, which will load the data based on the current view port only.

Sample: https://stackblitz.com/edit/react-ta71qb-oey2f3?file=index.js

[Ton That Hung]

Hi Joseph,
That mean, if I haven't filtered and enabled virtualization(or paging), I would not got the sorted dataSource(all records, not current view records) ?

Thanks.

[Joseph Christ Nithin Issack]

Ton,

  On inspecting the code example provided, we could see that you are using UrlAdaptor for binding the data. By default in UrlAdaptor, the data will be fetched on demand from the server. Hence it is not feasible to get all the data in the dataSource in the client side.

[Carlos Tenorio Perez]

Hi,

If you already have loaded from the beggining the data without the UrlAdaptor, is there some way? Can we access to some internal variable that contains all the datasource sorted and filtered?

Best regards

Carlos Tenorio Pérez

[Dineshnarasimman Muthu]

Hi Ton,

We have reviewed your query about getting data after sorting and filter without URL adaptor. We have prepared a sample with local data and used getCurrentViewRecords() method to get the record in the grid. We have attached the sample for your reference.

 function getDataSource() {

    var data = gridInstance.getCurrentViewRecords();

  }

  return (

    <div className="control-pane">

      <div className="control-section row">

        <button onClick={getDataSource}>Get dataSource</button>

        <GridComponent

          dataSource={orderDataSource}

          allowSorting={true}

          ref={(grid) => (gridInstance = grid)}

          allowFiltering={true}

          filterSettings={filterSettings}

        >

 

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

Please let us know if you need any further assistance.

Regards,

Dineshnarasimman

[Ton That Hung]

Hi Dineshnarasimman Muthu,

Thanks for your support.

Your solution is working so well in these cases: filtering, and sorting. But if I want to use Virtual Scroll, Infinite Scroll, or Paging. The "getCurrentViewRecords" function returns the data shown in the UI. My requirement is to get all data.

Link sample:https://stackblitz.com/edit/react-e4zmej-r6muns?file=index.js

Thanks.

[Dineshnarasimman Muthu]

Hi Ton,

We have reviewed your query about retrieving data after sorting and filtering in the grid. We would like to tell you that when using infinite scroll, pagination, we can only render the current view record. We cannot retrieve all the data while using infinite scroll, pagination. The purpose of infinite scroll and pagination is to retrieve the data on demand. It will request data for each page and each scroll from the server-side or your data source, allowing you to retrieve data on demand, hence we cannot retrieve all the data.

Regards,

Dineshnarasimman

[Ton That Hung]

Hi Dineshnarasimman Muthu,

Thanks for your support.

[Suganya Gopinath]

We are glad that the provided solution helped to solve the issue. Please get back to us for further assistance.