Server Side Grid (Observable Async) Checkbox Filtering option taking too much time to Load in Column Filter

[Salik khan]

Dear Sir,

Working on grid control (server side using observable async). Implementing features pagination, sorting, filtering (Checkbox) on columns. 

Each time clicking column filter taking too much time load data from server. 

How to minimize the time for loading each time? 

Attachment: Email_4283c24b.zip

[Shalini Maragathavel]

Hi Salik, 

Thanks for contacting Syncfusion support. 

Based on your query we suspect that the you are facing an issue while perform filtering in Grid. So, we have prepared a sample in custom binding and tried to reproduce the issue but we unable to reproduce the mentioned issue at our end . 

By default in EJ2 Grid the Excel/Checkbox filter in the Grid will display the data from the first 1000 records to optimize performance. The other records will be returned as result in the search option of the Filter dialog. This is the default behavior of Grid.

For using custom binding, you need to bind the response data(Grid data) returned from your API as an object of result(JSON data source) and count(Total data count) properties and set it to the Grid’s dataSource property. On setting the data source in this format, the ‘dataStateChange’ event will be triggered with corresponding query for every Grid action performed like Paging, Sorting and Filtering.., and the ‘dataSourceChanged’ event will be triggered while performing CRUD action in Grid. So using this you can send the queries in your required format to your API, process and return the result and then assign the returned result to the Grid’s dataSource property as an object of result and count properties.

Please refer the below sample for more information.

Sample: https://stackblitz.com/edit/angular-ntgj93-hammta?file=async-pipe.html 

More details on custom binding can be checked in the below help documentation link, 

Custom binding documentation: https://ej2.syncfusion.com/angular/documentation/grid/observables/#observables

Note:  The ‘dataStateChange’ event will not be triggered on Grid initial render. So for this case you need to return the data in the above mentioned format on initialization and assign it to the Grid’s dataSource property. 

If you still face the issue please share the below details that will be helpful for us to a provide better solution. 

1)     If you are facing script error in console, please share the screenshot of the error. 

2)     If possible please replicate the problem with our above attached sample. 

3)     Please share your Syncfusion package version. 

Regards,
Shalini M.