TreeGrid allows you to load large amount of data without performance degradation.
Row virtualization allows you to load and render rows only in the content viewport. It is an alternative way of paging in which the rows will be appended while scrolling vertically. To setup the row virtualization, you need to define
enableVirtualization
as true and content height by height
property.
The number of records displayed in the TreeGrid is determined implicitly by height of the content area and a buffer records will be maintained in the TreeGrid content in addition to the original set of rows.
Expand and Collapse state of any child record will be persisted.
<ejs-treegrid id="TreeGrid" height="600" dataSource="ViewBag.datasource" enableVirtualization="true" childMapping="Children" treeColumnIndex="1">
<e-treegrid-columns>
<e-treegrid-column field="TaskID" headerText="Player Jersey" textAlign="Right" width="120"></e-treegrid-column>
<e-treegrid-column field="FIELD1" headerText="Player Name" width="120"></e-treegrid-column>
<e-treegrid-column field="FIELD2" headerText="Year" textAlign="Right" width="100"></e-treegrid-column>
<e-treegrid-column field="FIELD3" headerText="Stint" textAlign="Right" width="120"></e-treegrid-column>
<e-treegrid-column field="FIELD4" headerText="TMID" textAlign="Right" width="120"></e-treegrid-column>
</e-treegrid-columns>
</ejs-treegrid>
public IActionResult VirtualScrolling()
{
ViewBag.datasource = VirtualDataFormat.GetVirtualData();
return View();
}
height
given to the TreeGrid.