Maximize Performance with Load-on-Demand and Virtualization Features in Essential JS 2 TreeGrid
Tags: performance, webdev, treegrid, javascript
Published: 2023-04-26 03:27:02

---
title: Maximize Performance with Load-on-Demand and Virtualization Features in Essential JS 2 TreeGrid
published: true
date: 2023-04-25 11:51:10 UTC
tags: performance, webdev, treegrid, javascript
canonical_url: https://www.syncfusion.com/blogs/post/load-on-demand-and-virtualization-in-essential-js-2-treegrid.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pqw116i781id0t535otr.png
---
The [Syncfusion Essential JS 2 TreeGrid component](https://www.syncfusion.com/javascript-ui-controls/js-tree-grid "Syncfusion Essential JS 2 TreeGrid Component") is a versatile and powerful tool for displaying hierarchical data in a structured, easy-to-navigate format. In addition to being available in [JavaScript](https://www.syncfusion.com/javascript-ui-controls "JavaScript UI Controls Library"), the TreeGrid component can be used in the ASP.NET ([Core](https://www.syncfusion.com/aspnet-core-ui-controls/tree-grid "ASP.NET Core Tree Grid"), [MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls/tree-grid "ASP.NET MVC Tree Grid")), [React](https://www.syncfusion.com/react-components/react-tree-grid "React TreeGrid Component"), [Angular](https://www.syncfusion.com/angular-components/angular-tree-grid "Angular Tree Grid Component"), and [Vue](https://www.syncfusion.com/vue-components/vue-tree-grid "Vue Tree Grid") frameworks.

Tree grids are a great way to represent hierarchical data in a tabular format, but they might become slow and unwieldy when dealing with large data sets. This is where the load-on-demand and virtualization features come in handy.

The load-on-demand feature allows you to load records from remote services only when they are requested by the user, instead of loading all records at once. Virtualization renders the row elements for the current viewport only and other row elements while scrolling in the TreeGrid.

These features are beneficial when dealing with large data sets that can cause performance issues if they are all loaded at once.

Let’s see how the load-on-demand and virtualization features enhance performance and the user experience while handling a huge volume of data in the Essential JS 2 TreeGrid.

## How to enable load-on-demand and virtualization features in the TreeGrid

**Note:** This guide is based on the Syncfusion [ASP.NET Core Tree Grid](https://www.syncfusion.com/aspnet-core-ui-controls/tree-grid "ASP.NET Core Tree Grid") component. If you are new to this platform, please visit the [getting started](https://ej2.syncfusion.com/aspnetcore/documentation/tree-grid/getting-started-core "Getting Started with ASP.NET Core TreeGrid Control") page before proceeding.

### Component-side configurations

We’ll use the data manager to provide the data source from a remote URL.

Refer to the following code example.

```xml
<ejs-treegrid id="TreeGrid" 
              idMapping="TaskID" 
              parentIdMapping="ParentValue" 
              loadChildOnDemand="true" 
              hasChildMapping="isParent" 
              treeColumnIndex="1" 
              enableVirtualization="true" 
              height="400">
 <e-data-manager url="/Home/DataSource" 
                 adaptor="UrlAdaptor" 
                 e-data-manager>
…
</ejs-treegrid>
```

In this code example:

- [idMapping](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.TreeGrid.TreeGrid.html#Syncfusion_EJ2_TreeGrid_TreeGrid_IdMapping "idMapping property of ASP.NET Core Tree Grid") and [parentIdMapping](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.TreeGrid.TreeGrid.html#Syncfusion_EJ2_TreeGrid_TreeGrid_ParentIdMapping "ParentIdMapping property of ASP.NET Core Tree Grid")—These properties connect self-referential data from remote services in parent-child relationships.
- [HasChildMapping](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.TreeGrid.TreeGrid.html#Syncfusion_EJ2_TreeGrid_TreeGrid_HasChildMapping "HasChildMapping property of ASP.NET Core Tree Grid")—This property represents the data objects in the data source, indicating whether the current record is a parent record. The TreeGrid can’t identify the records that have child records when data is loaded on-demand.
- [LoadChildOnDemand](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.TreeGrid.TreeGrid.html#Syncfusion_EJ2_TreeGrid_TreeGrid_LoadChildOnDemand "LoadChildOnDemand property of ASP.NET Core Tree Grid")—This property is optional. It loads all the parent records in an expanded state with their child records when enabled. In this blog, we will enable this property.
- [EnableVirtualization](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.TreeGrid.TreeGrid.html#Syncfusion_EJ2_TreeGrid_TreeGrid_EnableVirtualization "EnableVirtualization property of ASP.NET Core Tree Grid")—Enable this property to load only the records needed for the current viewport. The remaining data will be loaded on demand while scrolling. Without this property, the TreeGrid will load all the parent records simultaneously, thus affecting the performance.

These configurations are needed on the component side to enable load-on-demand and virtualization features in the TreeGrid.

**Note:** The paging feature loads all the child records at once. Thus, it affects performance. But the virtual scrolling feature loads only the child records necessary for the current viewport and dynamically loads other records during vertical scrolling.

### Server-side remote service configurations

For every action, like scrolling to the next record set or expanding the parent records, the TreeGrid will request the server return the next data set. So, these requests must be handled in the remote service, and it will return the required data based on the request.

The requests from the TreeGrid component are sent to the [DataManagerRequest](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Base.DataManagerRequest.html#properties "DataManagerRequest() method of ASP.NET Core Tree Grid") as parameters. The data operations will be performed and returned to the client TreeGrid component based on the parameters.

Refer to the following code example with inline comments.

```js
public IActionResult DataSource([FromBody] DataManagerRequest dm)
{
   List<TreeData> data = new List<TreeData>();
   data = TreeData.GetTree();
   DataOperations operation = new DataOperations();
   IEnumerable<TreeData> DataSource = data;
 
   if (!(dm.Where != null && dm.Where.Count > 1))
   {
      data = data.Where(p => p.ParentValue == null).ToList(); //filter root parent records for further easy data operations
 
   }
   DataSource = data;
   if (dm.Where != null && dm.Where.Count > 1)
   {
      DataSource = operation.PerformFiltering(DataSource, dm.Where, "and");
   }
   data = new List<TreeData>();
   foreach (var rec in DataSource)
   {
      data.Add(rec as TreeData);
   }
 
   // Filter parent and child records for the current viewport
   var GroupData = TreeData.GetTree().ToList().GroupBy(rec => rec.ParentValue).Where(g => g.Key != null).ToDictionary(g => g.Key?.ToString(), g => g.ToList());
   foreach (var Record in data.ToList())
   {
       if (GroupData.ContainsKey(Record.TaskID.ToString()))
       {
          var ChildGroup = GroupData[Record.TaskID.ToString()];
          if (ChildGroup?.Count > 0)
             AppendChildren(dm, ChildGroup, Record, GroupData, data);
       }
    }
    DataSource = data;
 
    if (dm.Expand != null && dm.Expand[0] == "CollapsingAction") // setting the skip index based on collapsed parent
     {
        string IdMapping = "TaskID";
        List<WhereFilter> CollapseFilter = new List<WhereFilter>();
        CollapseFilter.Add(new WhereFilter() { Field = IdMapping, value = dm.Where[0].value, Operator = dm.Where[0].Operator });
        var CollapsedParentRecord = operation.PerformFiltering(DataSource, CollapseFilter, "and");
        var index = data.Cast<object>().ToList().IndexOf(CollapsedParentRecord.Cast<object>().ToList()[0]);
        dm.Skip = index;
     }
     else if (dm.Expand != null && dm.Expand[0] == "ExpandingAction") // setting the skip index based on expanded parent
     {
        string IdMapping = "TaskID";
        List<WhereFilter> ExpandFilter = new List<WhereFilter>();
        ExpandFilter.Add(new WhereFilter() { Field = IdMapping, value = dm.Where[0].value, Operator = dm.Where[0].Operator });
        var ExpandedParentRecord = operation.PerformFiltering(DataSource, ExpandFilter, "and");
        var index = data.Cast<object>().ToList().IndexOf(ExpandedParentRecord.Cast<object>().ToList()[0]);
        dm.Skip = index;
     }
     int count = data.Count;
     DataSource = data;
 
     //Paging operation
     if (dm.Skip != 0)
     {
        DataSource = operation.PerformSkip(DataSource, dm.Skip);  
     }
     if (dm.Take != 0)
     {
        DataSource = operation.PerformTake(DataSource, dm.Take);
     }
     return dm.RequiresCounts ? Json(new { result = DataSource, count = count }) : Json(DataSource);
 
}
```

## Performance metrics

Let’s compare the performance metrics for rendering 10,000 records with and without load-on-demand and virtualization features in the TreeGrid.
<table>
<tbody>
<tr>
<td width="312">
<p>Without virtualization (normal scrolling) and loading data at once using data binding</p>
</td>
<td width="312">
<p>With virtualization and load-on-demand data binding</p>
</td>
</tr>
<tr>
<td width="312">
<p>~12 seconds</p>
</td>
<td width="312">
<p>~800 milliseconds</p>
</td>
</tr>
</tbody>
</table>
From this table data, it is evident that with load-on-demand and virtualization, the performance of the TreeGrid can be drastically enhanced.

## GitHub reference

Check out the complete code example for [Load-on-demand and virtualization features in the Essential JS 2 TreeGrid on GitHub](https://github.com/SyncfusionExamples/load-on-demand-data-binding-in-ej2-treegrid "Load on demand and virtualization in Essential JS 2 TreeGrid demo on GitHub").

## Conclusion

Thanks for reading! In this blog, we’ve seen how the load-on-demand and virtualization features help us to enhance performance and the user experience in the [Essential JS 2 TreeGrid](https://www.syncfusion.com/javascript-ui-controls/js-tree-grid "Essential JS 2 TreeGrid"). Please visit the [TreeGrid’s online demos](https://ej2.syncfusion.com/demos/#/bootstrap5/tree-grid/treegrid-overview.html "Essential JS 2 TreeGrid online demos") and [documentation](https://ej2.syncfusion.com/documentation/treegrid/getting-started/ "Getting started with JavaScript Tree Grid Control") for more information. We appreciate your feedback, which you can leave in the comments section below.

You can download our [free trial](https://www.syncfusion.com/downloads/essential-js2/confirm "Free evaluation of the Essential Studio for JavaScript") if you do not have a Syncfusion license but wish to try the TreeGrid component.

For questions, you can contact us via our [support forums](https://www.syncfusion.com/forums "Syncfusion Support Forums"), [support portal](https://www.syncfusion.com/identity/login "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [What’s New in Essential JS 2: 2023 Volume 1](https://www.syncfusion.com/blogs/post/essential-js-2-2023-volume-1.aspx "Blog: What’s New in Essential JS 2: 2023 Volume 1")
- [5 Best Practices in Handling HTTP Errors in JavaScript](https://www.syncfusion.com/blogs/post/handling-http-errors-javascript.aspx "Blog: 5 Best Practices in Handling HTTP Errors in JavaScript")
- [10 Tips and Tricks to Handle JavaScript Objects](https://www.syncfusion.com/blogs/post/10-tips-and-tricks-to-handle-javascript-objects.aspx "Blog: 10 Tips and Tricks to Handle JavaScript Objects")
- [Effectively Visualize a Large Number of Markers Using JavaScript Maps](https://www.syncfusion.com/blogs/post/visualize-a-large-number-of-markers-using-javascript-maps.aspx "Blog: Effectively Visualize a Large Number of Markers Using JavaScript Maps")