Client side grid filtering

[Ashley Fonseca]

Hello,

I am using Syncfusion v17.1.0.49. Is there an option to give all records to grid data source and then filter grid on specific columns. So hen user loads the page it will show the filter records. Then user can select the grid filter and load all records.

My there is large data set loaded on page load then when user tries to export to excel, Chrome shows 'Page Unresponsive' message box and after couple of minutes file is downloaded. In most scenario's user do not need to download all the data. So if I can filter the data on page load then it will fix the issue.

Regards,
Ashley

[Rajapandi Ravi]

Hi Ashley,

Greetings from Syncfusion support

Based on your query, we could see that you are rendering more number records to the grid at a time. We would like to let you know the behavior of EJ2 Grid. 

When you are rendering large number of records then Grid will take considerable time render whole records in DOM and it leads performance issue. You can avoid this by using following feature (Paging, Virtualization, InfiniteScroll) of Grid which works based on on-demand concept and maintains current page records only in the DOM. It improves the Grid performance. 

** Paging ** 

Paging provides an option to display Grid data in page segments. To enable paging, set the allowPaging to true. When paging is enabled, pager component renders at the bottom of the grid. Paging options can be configured through the pageSettings. 

Demo: https://ej2.syncfusion.com/aspnetmvc/Grid/DefaultPaging#/material

Doc: https://ej2.syncfusion.com/aspnetmvc/documentation/grid/paging/

** Virtualization **   

If you want to load large amount data without using paging feature, you can use Virtualization feature. It allows you to load large amount of data without performance degradation. 

Row virtualization allows you to load and render rows only in content viewport. It is an alternative way of paging in which the data will load while scrolling vertically. To setup the row virtualization, you need to define enableVirtualization as true and content height by height property. 

Demo: https://ej2.syncfusion.com/aspnetmvc/Grid/VirtualScrolling#/material

Doc: https://ej2.syncfusion.com/aspnetmvc/documentation/grid/virtual/

** Infinite Scrolling ** 

Infinite scrolling is used to load a huge amount of data without degrading the Grid performance. This feature works like the lazy loading concept, which means the buffer data is loaded only when the scrollbar reaches the end of the scroller. 

To enable Infinite scrolling, set enableInfiniteScrolling property as true. 

Demo: https://ej2.syncfusion.com/aspnetmvc/Grid/InfiniteScrolling#/material

Doc: https://ej2.syncfusion.com/aspnetmvc/documentation/grid/infinite-scroll/

You can use any of this feature based on your requirement.  

** Data Binding ** 

The Grid uses DataManager, which supports both RESTful JSON data services binding and local JavaScript object array binding. The dataSource property can be assigned either with the instance of DataManager or JavaScript object array collection. It supports two kinds of data binding method: 

• Local data
• Remote data

Local data: https://ej2.syncfusion.com/aspnetmvc/documentation/grid/data-binding/local-data

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

You can choose the databinding based on your data base.

** Server-Side Export**

The Grid has an option to export the data to Excel in server side using Grid server export library. You can use this to perform server-side export for large amount of data.

More details on this along with the required DLL references needed for performing this action can be checked in the below documentation link,

Documentation: https://ej2.syncfusion.com/aspnetmvc/documentation/grid/excel-export/exporting-grid-in-server

Query#: So, if I can filter the data on page load then it will fix the issue

In your query, you like to filter the Grid on initial rendering, To apply the filter at initial rendering, set the filter Predicate object in FilterSettings property of Column. Please refer the below documentation for more information.

Documentation: https://ej2.syncfusion.com/aspnetmvc/documentation/grid/filtering/filtering#initial-filter

If you still face any issue, please share the below details that will be helpful for us to validate the problem.

1)         Share type of data binding used(local data or remote data).

2)         If remote, please share what adaptor you are using in your application.

3)         Please share issue scenario in video demonstration format.

Regards,

Rajapandi R