ng-template performance

[Scott Price]

Hello,

I have a relatively simple template in some of the cols in my grids and when I had some logging enabled, I noticed that the template code was being called extremely often. I have one grid that needs to return 1000 records per batch and the grid is unusable when I have 2 cols with ng-template code. Is there a a better way to transform data before it's rendered as part of the grid lifecycle, or do I need to handle before I hand off data to the grid?

Thanks,

Scott

[Rajapandiyan Settu]

Hi Scott, 

 

Thanks for contacting 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 rendering large number of records with column template feature 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/angular/demos/#/material/grid/paging 

 

Doc: https://ej2.syncfusion.com/angular/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/angular/demos/#/material/grid/virtualization 

 

Doc: https://ej2.syncfusion.com/angular/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/angular/demos/#/material/grid/infinite-scrolling 

 

Doc: https://ej2.syncfusion.com/angular/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/angular/documentation/grid/data-binding/#local-data 

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

Observables: https://ej2.syncfusion.com/angular/documentation/grid/observables/ 

 

You can choose the data-binding based on your data base. 

 

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

 

Regards, 

Rajapandiyan S