Virtual scroll in EJ2 JavaScript Treegrid control

10 Jan 202515 minutes to read

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

To use virtualization, you need to inject VirtualScroll module in treegrid.

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.

ej.treegrid.TreeGrid.Inject(ej.treegrid.VirtualScroll);
var dataSource();
var treegrid = new ej.treegrid.TreeGrid({
        dataSource: var virtualData,
        enableVirtualization: true,
        height: 317,
        treeColumnIndex: 1,
        childMapping: 'Crew',
        columns: [
        { field: 'TaskID', headerText: 'Player Jersey', width: 140, textAlign: 'right' },
        { field: 'FIELD1', headerText: 'Player Name', width: 140 },
        { field: 'FIELD2', headerText: 'Year', width: 120, textAlign: 'right' },
        { field: 'FIELD3', headerText: 'Stint', width: 120, textAlign: 'right' },
        { field: 'FIELD4', headerText: 'TMID', width: 120, textAlign: 'right' }
    ]
    });
    treegrid.appendTo('#TreeGrid');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 TreeGrid</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript TreeGrid Control">
    <meta name="author" content="Syncfusion">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-grids/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-dropdowns/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-calendars/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-treegrid/styles/material.css" rel="stylesheet">
    
    
    
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    
    
    
    
<script src="https://cdn.syncfusion.com/ej2/28.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
        
    <div id="container">
        <div id="TreeGrid"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

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.

ej.treegrid.TreeGrid.Inject(ej.treegrid.VirtualScroll);
var dataSource();
var treegrid = new ej.treegrid.TreeGrid({
        dataSource: var virtualData,
        enableVirtualization: true,
        enableColumnVirtualization: true,
        height: 317,
        treeColumnIndex: 1,
        childMapping: 'Crew',
        columns: [
        { field: 'TaskID', headerText: 'Player Jersey', width: 140, textAlign: 'right' },
        { field: 'FIELD1', headerText: 'Player Name', width: 140 },
        { field: 'FIELD2', headerText: 'Year', width: 120, textAlign: 'right' },
        { field: 'FIELD3', headerText: 'Stint', width: 120, textAlign: 'right' },
        { field: 'FIELD4', headerText: 'TMID', width: 120, textAlign: 'right' },
        { field: 'FIELD5', headerText: 'LGID', width: 120, textAlign: 'Right' },
        { field: 'FIELD6', headerText: 'GP', width: 120, textAlign: 'Right' },
        { field: 'FIELD7', headerText: 'GS', width: 120, textAlign: 'Right' },
        { field: 'FIELD8', headerText: 'Minutes', width: 120, textAlign: 'Right' },
        { field: 'FIELD9', headerText: 'Points', width: 120, textAlign: 'Right' },
        { field: 'FIELD10', headerText: 'oRebounds', width: 120, textAlign: 'Right' },
        { field: 'FIELD11', headerText: 'dRebounds', width: 120, textAlign: 'Right' },
        { field: 'FIELD12', headerText: 'Rebounds', width: 120, textAlign: 'Right' },
        { field: 'FIELD13', headerText: 'Assists', width: 120, textAlign: 'Right' },
        { field: 'FIELD14', headerText: 'Steals', width: 120, textAlign: 'Right' },
        { field: 'FIELD15', headerText: 'Blocks', width: 120, textAlign: 'Right' },
        { field: 'FIELD16', headerText: 'Turnovers', width: 120, textAlign: 'Right' },
        { field: 'FIELD17', headerText: 'PF', width: 120, textAlign: 'Right' },
        { field: 'FIELD18', headerText: 'fgAttempted', width: 120, textAlign: 'Right' },
        { field: 'FIELD19', headerText: 'ftAttempted', width: 120, textAlign: 'Right' },
        { field: 'FIELD20', headerText: 'ThreeAttempted', width: 120, textAlign: 'Right' },
        { field: 'FIELD21', headerText: 'ThreeMade', width: 120, textAlign: 'Right' },
        { field: 'FIELD22', headerText: 'PostGP', width: 120, textAlign: 'Right' },
        { field: 'FIELD23', headerText: 'ftMade', width: 120, textAlign: 'Right' },
        { field: 'FIELD24', headerText: 'fgMade', width: 120, textAlign: 'Right' },
        { field: 'FIELD25', headerText: 'ffmade', width: 120, textAlign: 'Right' },
        { field: 'FIELD26', headerText: 'PostGS', width: 120, textAlign: 'Right' },
        { field: 'FIELD27', headerText: 'PostMinutes', width: 120, textAlign: 'Right' },
        { field: 'FIELD28', headerText: 'PostPoints', width: 120, textAlign: 'Right' },
        { field: 'FIELD29', headerText: 'PostoRebounds', width: 120, textAlign: 'Right' },
        { field: 'FIELD30', headerText: 'PostdRebounds', width: 120, textAlign: 'Right' },
    ]
    });
    treegrid.appendTo('#TreeGrid');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 TreeGrid</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript TreeGrid Control">
    <meta name="author" content="Syncfusion">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-grids/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-dropdowns/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-calendars/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-treegrid/styles/material.css" rel="stylesheet">
    
    
    
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    
    
    
    
<script src="https://cdn.syncfusion.com/ej2/28.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
        
    <div id="container">
        <div id="TreeGrid"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

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

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