Virtualization in ASP.NET CORE Tree View

24 Aug 20266 minutes to read

The TreeView control supports UI virtualization to enhance performance when handling a large amount of data. This feature optimizes rendering by initially gathering all data but only rendering a subset of it during the initial load. The remaining items are then loaded dynamically as the user scrolls within the TreeView container.

To enable virtualization, set the enableVirtualization property to true and define a fixed height for the TreeView container.

In the following sample, the enableVirtualization property is enabled.

<ejs-treeview id="tree" enableVirtualization="true" showCheckBox="true" height="400px">
    <e-treeview-fields dataSource="ViewBag.data"
                       id="Id"
                       parentId="PId"
                       text="Name"
                       hasChildren="HasChild"
                       expanded="Expanded">
    </e-treeview-fields>
</ejs-treeview>

<style>
    .treecontainer {
        max-width: 500px;
        margin: 0 auto;
    }
</style>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using EJ2CoreSampleBrowser.Models;

namespace EJ2CoreSampleBrowser.Controllers.TreeView
{
    public partial class TreeViewController : Controller
    {
        public IActionResult Virtualization()
        {
            ViewBag.data = GetVirtualizationData();
            return View();
        }

        private List<TreeviewVirtualization> GetVirtualizationData()
        {
            List<TreeviewVirtualization> localData = new List<TreeviewVirtualization>();

            for (int i = 1; i <= 50; i++)
            {
                localData.Add(new TreeviewVirtualization
                {
                    id = i,
                    name = "Parent Node " + i,
                    HasChild = true,
                    Expanded = true
                });

                for (int j = 1; j <= 20; j++)
                {
                    localData.Add(new TreeviewVirtualization
                    {
                        id = (i * 1000) + j,
                        pid = i,
                        name = "Child Node " + i + "-" + j
                    });
                }
            }

            return localData;
        }
    }

    public class TreeviewVirtualization
    {
        public int id { get; set; }
        public int pid { get; set; }
        public string name { get; set; }
        public bool HasChild { get; set; }
        public bool Expanded { get; set; }
    }
}

Performance benefits

Virtualization provides the following performance benefits:

  • Reduced DOM elements: Only visible nodes are rendered in the DOM, reducing memory consumption.

  • Faster initial load: Large datasets load quickly as only a subset of nodes are rendered initially.

  • Smooth scrolling: Dynamic loading ensures smooth scrolling experience without lag.

  • Lower CPU usage: Rendering fewer elements reduces CPU consumption.

Important notes

  • The height property is required when virtualization is enabled.