Tree Grid Virtualization

6 Jan 20256 minutes to read

TreeGrid allows you to load large amount of data without performance degradation.

Row Virtualization

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.

@Html.EJS().TreeGrid("DefaultFunctionalities").DataSource((IEnumerable<object>)ViewBag.datasource).Columns(col =>
    {
        col.Field("TaskID").HeaderText("Player Jersey").Width(120).TextAlign(TextAlign.Right).Add();
        col.Field("FIELD1").HeaderText("Player Name").Width(120).Add();
        col.Field("FIELD2").HeaderText("Year").Width(100).TextAlign(TextAlign.Right).Add();
        col.Field("FIELD3").HeaderText("Stint").Width(120).TextAlign(TextAlign.Right).Add();
        col.Field("FIELD4").HeaderText("TMID").Width(120).TextAlign(TextAlign.Right).Add();
    }).Height(400).ChildMapping("Children").TreeColumnIndex(1).EnableVirtualization(true).Render()
public IActionResult VirtualScrolling()
        {
            ViewBag.datasource = VirtualDataFormat.GetVirtualData();
            return View();
        }

Limitations

  • Row virtual scrolling is not compatible with the following feature
    1. Batch editing
    2. Detail template
    3. Row template
    4. Rowspan
    5. Autofill

  • It is necessary to set a static height for the component or its parent container when using row virtualization. The 100% height will work only if the component height is set to 100%, and its parent container has a static height.

  • When row virtual scrolling is activated, compatibility for copy-paste and drag-and-drop operations is limited to the data items visible in the current viewport of the tree grid.
  • The cell-based selection is not supported for row virtual scrolling.
  • Using different row heights with a template column, when the template height differs for each row, is not supported.
  • Due to the element height limitation in browsers, the maximum number of records loaded by the tree grid is limited by the browser capability.
  • The height of the tree grid content is calculated using the row height and total number of records in the data source and hence features which changes row height such as text wrapping are not supported.

  • If you want to increase the row height to accommodate the content then you can specify the row height as below to ensure all the table rows are in same height.

      .e-treegrid .e-row {
      height: 2em;
  }

Column Virtualization

Column virtualization allows you to virtualize columns. It will render column only in the current view port and all other columns are rendered on demand during horizontal scrolling.

To setup the column virtualization, set the EnableVirtualization and EnableColumnVirtualization properties as true.

@Html.EJS().TreeGrid("DefaultFunctionalities").DataSource((IEnumerable<object>)ViewBag.datasource).Columns(col =>
    {
        col.Field("TaskID").HeaderText("Player Jersey").Width(120).TextAlign(TextAlign.Right).Add();
        col.Field("FIELD1").HeaderText("Player Name").Width(120).Add();
        col.Field("FIELD2").HeaderText("Year").Width(100).TextAlign(TextAlign.Right).Add();
        col.Field("FIELD3").HeaderText("Stint").Width(120).TextAlign(TextAlign.Right).Add();
        col.Field("FIELD4").HeaderText("TMID").Width(120).TextAlign(TextAlign.Right).Add();
        col.Field("Field6").HeaderText("GP").Width("120").TextAlign(TextAlign.Right).Add();
        col.Field("Field7").HeaderText("GS").Width("120").TextAlign(TextAlign.Right).Add();
        col.Field("Field8").HeaderText("Minutes").Width("120").TextAlign(TextAlign.Right).Add();
        col.Field("Field9").HeaderText("Points").Width("120").TextAlign(TextAlign.Right).Add();
        col.Field("Field10").HeaderText("oRebounds").Width("130").TextAlign(TextAlign.Right).Add();
        col.Field("Field11").HeaderText("dRebounds").Width("130").TextAlign(TextAlign.Right).Add();
        col.Field("Field12").HeaderText("Rebounds").Width("130").TextAlign(TextAlign.Right).Add();
        col.Field("Field13").HeaderText("Assists").Width("120").TextAlign(TextAlign.Right).Add();
        col.Field("Field14").HeaderText("Steals").Width("120").TextAlign(TextAlign.Right).Add();
        col.Field("Field15").HeaderText("Blocks").Width("120").TextAlign(TextAlign.Right).Add();
        col.Field("Field16").HeaderText("Turnovers").Width("130").TextAlign(TextAlign.Right).Add();
        col.Field("Field17").HeaderText("PF").Width("120").TextAlign(TextAlign.Right).Add();
        col.Field("Field18").HeaderText("fgAttempted").Width("150").TextAlign(TextAlign.Right).Add();
        col.Field("Field19").HeaderText("fgMade").Width("120").TextAlign(TextAlign.Right).Add();
        col.Field("Field20").HeaderText("ftAttempted").Width("150").TextAlign(TextAlign.Right).Add();
        col.Field("Field21").HeaderText("ftMade").Width("120").TextAlign(TextAlign.Right).Add();
        col.Field("Field22").HeaderText("ThreeAttempted").Width("150").TextAlign(TextAlign.Right).Add();
        col.Field("Field23").HeaderText("ThreeMade").Width("130").TextAlign(TextAlign.Right).Add();
        col.Field("Field24").HeaderText("PostGP").Width("120").TextAlign(TextAlign.Right).Add();
        col.Field("Field25").HeaderText("PostGS").Width("120").TextAlign(TextAlign.Right).Add();
        col.Field("Field26").HeaderText("PostMinutes").Width("120").TextAlign(TextAlign.Right).Add();
        col.Field("Field27").HeaderText("PostPoints").Width("130").TextAlign(TextAlign.Right).Add();
        col.Field("Field28").HeaderText("PostoRebounds").Width("130").TextAlign(TextAlign.Right).Add();
        col.Field("Field29").HeaderText("PostdRebounds").Width("130").TextAlign(TextAlign.Right).Add();
        col.Field("Field30").HeaderText("PostRebounds").Width("130").TextAlign(TextAlign.Right).Add();
    }).Height(400).ChildMapping("Children").TreeColumnIndex(1).EnableVirtualization(true).EnableColumnVirtualization(true).Render()
public IActionResult VirtualScrolling()
        {
            ViewBag.datasource = VirtualDataFormat.GetVirtualData();
            return View();
        }

NOTE

Column’s Width is required for column virtualization. If column’s width is not defined then tree grid will consider its value as 200px.

Limitations

  • While using column virtual scrolling, column width should be in pixel. Percentage values are not accepted.
  • Selected column details are only retained within the viewport. When the next set of columns is loaded, the selection for previously visible columns is lost.
  • The cell selection is not supported for column virtual scrolling.
  • The Ctrl + Home and Ctrl + End keys are not supported when using column virtual scrolling.
  • The following features are compatible with column virtualization and works only within the viewport:
    1. Column resizing
    2. Column reordering
    3. Auto-fit
    4. Print
    5. Clipboard
    6. Column menu - Column chooser, AutofitAll
  • Column virtual scrolling is not compatible with the following feature
    1. Colspan
    2. Batch editing
    3. Column with infinite scrolling
    4. Stacked header
    5. Row template
    6. Detail template
    7. Autofill
    8. Column chooser

NOTE

You can refer to our ASP.NET MVC Tree Grid feature tour page for its groundbreaking feature representations. You can also explore our ASP.NET MVC Tree Grid example to knows how to present and manipulate data.