Load grid with large data

[Daniel]

Hello team,

Currently, I have a requirement to load a grid with 300,000 records, what is your recommendation to do it? to keep the good performance and suppose that the user could have bad bandwidth. Additionally, the grid must have the AllowFiltering property activated.

I really appreciate any help you can provide.

Daniel

[Rajapandi Ravi]

Hi Daniel,

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/PagingAPI#/material3

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#/material3

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#/material3

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.

Regards,

Rajapandi R