Virtualization in Vue TreeGrid component

02 Feb 2023 / 4 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 the provide section.

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.

Source

Preview

app.vue

datasource.js

<template>
<div id="app">
<ejs-treegrid ref='treegrid' :dataSource="virtualData" :enableVirtualization='true' :treeColumnIndex='1' childMapping='Crew' height=317>
    <e-columns>
        <e-column field='TaskID' headerText='Player Jersey' width='120' textAlign='Right'></e-column>
        <e-column field='FIELD1' headerText='Player Name' width='120'></e-column>
        <e-column field='FIELD2' headerText='Year' width='100' textAlign='Right'></e-column>
        <e-column field='FIELD3' headerText='Stint' width='120' textAlign='Right'></e-column>
        <e-column field='FIELD4' headerText='TMID' width='120' textAlign='Right'></e-column>
        <e-column field='FIELD5' headerText='LGID' width='120' textAlign='Right'></e-column>
    </e-columns>
</ejs-treegrid>
</div>
</template>
<script>
import Vue from "vue";
import { TreeGridPlugin, VirtualScroll } from "@syncfusion/ej2-vue-treegrid";
import { dataSource, virtualData } from "./datasource.js";

Vue.use(TreeGridPlugin);

export default {
  data () {
    return {
      virtualData: dataSource(),
    };
  },
  provide: {
      treegrid: [VirtualScroll]
  }
}
</script>

define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });

exports.dataSource = function() {
    var virtualData = [];
    var parent = -1;
    var parentId;
    var crew = 'Crew';
    var names = ['VINET', 'TOMSP', 'HANAR', 'VICTE', 'SUPRD', 'HANAR', 'CHOPS', 'RICSU', 'WELLI', 'HILAA', 'ERNSH', 'CENTC',
    'OTTIK', 'QUEDE', 'RATTC', 'ERNSH', 'FOLKO', 'BLONP', 'WARTH', 'FRANK', 'GROSR', 'WHITC', 'WARTH', 'SPLIR', 'RATTC', 'QUICK', 'VINET',
    'MAGAA', 'TORTU', 'MORGK', 'BERGS', 'LEHMS', 'BERGS', 'ROMEY', 'ROMEY', 'LILAS', 'LEHMS', 'QUICK', 'QUICK', 'RICAR', 'REGGC', 'BSBEV',
    'COMMI', 'QUEDE', 'TRADH', 'TORTU', 'RATTC', 'VINET', 'LILAS', 'BLONP', 'HUNGO', 'RICAR', 'MAGAA', 'WANDK', 'SUPRD', 'GODOS', 'TORTU',
    'OLDWO', 'ROMEY', 'LONEP', 'ANATR', 'HUNGO', 'THEBI', 'DUMON', 'WANDK', 'QUICK', 'RATTC', 'ISLAT', 'RATTC', 'LONEP', 'ISLAT', 'TORTU',
    'WARTH', 'ISLAT', 'PERIC', 'KOENE', 'SAVEA', 'KOENE', 'BOLID', 'FOLKO', 'FURIB', 'SPLIR', 'LILAS', 'BONAP', 'MEREP', 'WARTH', 'VICTE',
    'HUNGO', 'PRINI', 'FRANK', 'OLDWO', 'MEREP', 'BONAP', 'SIMOB', 'FRANK', 'LEHMS', 'WHITC', 'QUICK', 'RATTC', 'FAMIA'];
    for (var i = 0; i < 50000; i++) {        
        if (i % 5 === 0) {
            parent = i;
        }
        if (i % 5 !== 0) {
            var num = isNaN((virtualData.length % parent)- 1) ?  0 : (virtualData.length % parent) - 1;
           
            virtualData[num][crew].push({
                'TaskID': i + 1,
                'FIELD1': names[Math.floor(Math.random() * names.length)],
                'FIELD2': 1967 + (i % 10),
                'FIELD3': Math.floor(Math.random() * 200),
                'FIELD4': Math.floor(Math.random() * 100),
                'FIELD5': Math.floor(Math.random() * 2000),
                'FIELD6': Math.floor(Math.random() * 1000),
                'FIELD7': Math.floor(Math.random() * 100),
                'FIELD8': Math.floor(Math.random() * 10),
                'FIELD9': Math.floor(Math.random() * 10),
                'FIELD10': Math.floor(Math.random() * 100),
                'FIELD11': Math.floor(Math.random() * 100),
                'FIELD12': Math.floor(Math.random() * 1000),
                'FIELD13': Math.floor(Math.random() * 10),
                'FIELD14': Math.floor(Math.random() * 10),
                'FIELD15': Math.floor(Math.random() * 1000),
                'FIELD16': Math.floor(Math.random() * 200),
                'FIELD17': Math.floor(Math.random() * 300),
                'FIELD18': Math.floor(Math.random() * 400),
                'FIELD19': Math.floor(Math.random() * 500),
                'FIELD20': Math.floor(Math.random() * 700),
                'FIELD21': Math.floor(Math.random() * 800),
                'FIELD22': Math.floor(Math.random() * 1000),
                'FIELD23': Math.floor(Math.random() * 2000),
                'FIELD24': Math.floor(Math.random() * 150),
                'FIELD25': Math.floor(Math.random() * 1000),
                'FIELD26': Math.floor(Math.random() * 100),
                'FIELD27': Math.floor(Math.random() * 400),
                'FIELD28': Math.floor(Math.random() * 600),
                'FIELD29': Math.floor(Math.random() * 500),
                'FIELD30': Math.floor(Math.random() * 300)
            });
        } else {
            virtualData.push({
                'TaskID': i + 1,
                'Crew': [],
                'FIELD1': names[Math.floor(Math.random() * names.length)],
                'FIELD2': 1967 + (i % 10),
                'FIELD3': Math.floor(Math.random() * 200),
                'FIELD4': Math.floor(Math.random() * 100),
                'FIELD5': Math.floor(Math.random() * 2000),
                'FIELD6': Math.floor(Math.random() * 1000),
                'FIELD7': Math.floor(Math.random() * 100),
                'FIELD8': Math.floor(Math.random() * 10),
                'FIELD9': Math.floor(Math.random() * 10),
                'FIELD10': Math.floor(Math.random() * 100),
                'FIELD11': Math.floor(Math.random() * 100),
                'FIELD12': Math.floor(Math.random() * 1000),
                'FIELD13': Math.floor(Math.random() * 10),
                'FIELD14': Math.floor(Math.random() * 10),
                'FIELD15': Math.floor(Math.random() * 1000),
                'FIELD16': Math.floor(Math.random() * 200),
                'FIELD17': Math.floor(Math.random() * 300),
                'FIELD18': Math.floor(Math.random() * 400),
                'FIELD19': Math.floor(Math.random() * 500),
                'FIELD20': Math.floor(Math.random() * 700),
                'FIELD21': Math.floor(Math.random() * 800),
                'FIELD22': Math.floor(Math.random() * 1000),
                'FIELD23': Math.floor(Math.random() * 2000),
                'FIELD24': Math.floor(Math.random() * 150),
                'FIELD25': Math.floor(Math.random() * 1000),
                'FIELD26': Math.floor(Math.random() * 100),
                'FIELD27': Math.floor(Math.random() * 400),
                'FIELD28': Math.floor(Math.random() * 600),
                'FIELD29': Math.floor(Math.random() * 500),
                'FIELD30': Math.floor(Math.random() * 300),
            });
        }
    }
    return virtualData;
}
});

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.

Source

Preview

app.vue

datasource.js

<template>
<div id="app">
<ejs-treegrid ref='treegrid' :dataSource="virtualData" :enableVirtualization='true' :enableColumnVirtualization='true' :treeColumnIndex='1' childMapping='Crew' height=317>
    <e-columns>
        <e-column field='TaskID' headerText='Player Jersey' width='120' textAlign='Right'></e-column>
        <e-column field='FIELD1' headerText='Player Name' width='120'></e-column>
        <e-column field='FIELD2' headerText='Year' width='100' textAlign='Right'></e-column>
        <e-column field='FIELD3' headerText='Stint' width='120' textAlign='Right'></e-column>
        <e-column field='FIELD4' headerText='TMID' width='120' textAlign='Right'></e-column>
        <e-column field='FIELD5' headerText='LGID' width='120' textAlign='Right'></e-column>
        <e-column field='FIELD5' headerText='LGID' width= 120 textAlign='Right'></e-column>
        <e-column field='FIELD6' headerText='GP' width= 120 textAlign='Right'></e-column>
        <e-column field='FIELD7' headerText='GS' width= 120 textAlign='Right'></e-column>
        <e-column field='FIELD8' headerText='Minutes' width= 120 textAlign='Right'></e-column>
        <e-column field='FIELD9' headerText='Points' width= 120 textAlign='Right'></e-column>
        <e-column field='FIELD10' headerText='oRebounds' width= 120 textAlign='Right'></e-column>
        <e-column field='FIELD11' headerText='dRebounds' width= 120 textAlign='Right'></e-column>
        <e-column field='FIELD12' headerText='Rebounds' width= 120 textAlign='Right'></e-column>
        <e-column field='FIELD13' headerText='Assists' width= 120 textAlign='Right'></e-column>
        <e-column field='FIELD14' headerText='Steals' width= 120 textAlign='Right'></e-column>
        <e-column field='FIELD15' headerText='Blocks' width= 120 textAlign='Right'></e-column>
        <e-column field='FIELD16' headerText='Turnovers' width= 120 textAlign='Right'></e-column>
        <e-column field='FIELD17' headerText='PF' width= 120 textAlign='Right'></e-column>
        <e-column field='FIELD18' headerText='fgAttempted' width= 120 textAlign='Right'></e-column>
        <e-column field='FIELD19' headerText='ftAttempted' width= 120 textAlign='Right'></e-column>
        <e-column field='FIELD20' headerText='ThreeAttempted' width= 120 textAlign='Right'></e-column>
        <e-column field='FIELD21' headerText='ThreeMade' width= 120 textAlign='Right'></e-column>
        <e-column field='FIELD22' headerText='PostGP' width= 120 textAlign='Right'></e-column>
        <e-column field='FIELD23' headerText='ftMade' width= 120 textAlign='Right'></e-column>
        <e-column field='FIELD24' headerText='fgMade' width= 120 textAlign='Right'></e-column>
        <e-column field='FIELD25' headerText='ffmade' width= 120 textAlign='Right'></e-column>
        <e-column field='FIELD26' headerText='PostGS' width= 120 textAlign='Right'></e-column>
        <e-column field='FIELD27' headerText='PostMinutes' width= 120 textAlign='Right'></e-column>
        <e-column field='FIELD28' headerText='PostPoints' width= 120 textAlign='Right'></e-column>
        <e-column field='FIELD29' headerText='PostoRebounds' width= 120 textAlign='Right'></e-column>
        <e-column field='FIELD30' headerText='PostdRebounds' width= 120 textAlign='Right'></e-column>
    </e-columns>
</ejs-treegrid>
</div>
</template>
<script>
import Vue from "vue";
import { TreeGridPlugin, VirtualScroll } from "@syncfusion/ej2-vue-treegrid";
import { dataSource, virtualData } from "./datasource.js";

Vue.use(TreeGridPlugin);

export default {
  data () {
    return {
      virtualData: dataSource(),
    };
  },
  provide: {
      treegrid: [VirtualScroll]
  }
}
</script>

define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });

exports.dataSource = function() {
    var virtualData = [];
    var parent = -1;
    var parentId;
    var crew = 'Crew';
    var names = ['VINET', 'TOMSP', 'HANAR', 'VICTE', 'SUPRD', 'HANAR', 'CHOPS', 'RICSU', 'WELLI', 'HILAA', 'ERNSH', 'CENTC',
    'OTTIK', 'QUEDE', 'RATTC', 'ERNSH', 'FOLKO', 'BLONP', 'WARTH', 'FRANK', 'GROSR', 'WHITC', 'WARTH', 'SPLIR', 'RATTC', 'QUICK', 'VINET',
    'MAGAA', 'TORTU', 'MORGK', 'BERGS', 'LEHMS', 'BERGS', 'ROMEY', 'ROMEY', 'LILAS', 'LEHMS', 'QUICK', 'QUICK', 'RICAR', 'REGGC', 'BSBEV',
    'COMMI', 'QUEDE', 'TRADH', 'TORTU', 'RATTC', 'VINET', 'LILAS', 'BLONP', 'HUNGO', 'RICAR', 'MAGAA', 'WANDK', 'SUPRD', 'GODOS', 'TORTU',
    'OLDWO', 'ROMEY', 'LONEP', 'ANATR', 'HUNGO', 'THEBI', 'DUMON', 'WANDK', 'QUICK', 'RATTC', 'ISLAT', 'RATTC', 'LONEP', 'ISLAT', 'TORTU',
    'WARTH', 'ISLAT', 'PERIC', 'KOENE', 'SAVEA', 'KOENE', 'BOLID', 'FOLKO', 'FURIB', 'SPLIR', 'LILAS', 'BONAP', 'MEREP', 'WARTH', 'VICTE',
    'HUNGO', 'PRINI', 'FRANK', 'OLDWO', 'MEREP', 'BONAP', 'SIMOB', 'FRANK', 'LEHMS', 'WHITC', 'QUICK', 'RATTC', 'FAMIA'];
    for (var i = 0; i < 50000; i++) {        
        if (i % 5 === 0) {
            parent = i;
        }
        if (i % 5 !== 0) {
            var num = isNaN((virtualData.length % parent)- 1) ?  0 : (virtualData.length % parent) - 1;
           
            virtualData[num][crew].push({
                'TaskID': i + 1,
                'FIELD1': names[Math.floor(Math.random() * names.length)],
                'FIELD2': 1967 + (i % 10),
                'FIELD3': Math.floor(Math.random() * 200),
                'FIELD4': Math.floor(Math.random() * 100),
                'FIELD5': Math.floor(Math.random() * 2000),
                'FIELD6': Math.floor(Math.random() * 1000),
                'FIELD7': Math.floor(Math.random() * 100),
                'FIELD8': Math.floor(Math.random() * 10),
                'FIELD9': Math.floor(Math.random() * 10),
                'FIELD10': Math.floor(Math.random() * 100),
                'FIELD11': Math.floor(Math.random() * 100),
                'FIELD12': Math.floor(Math.random() * 1000),
                'FIELD13': Math.floor(Math.random() * 10),
                'FIELD14': Math.floor(Math.random() * 10),
                'FIELD15': Math.floor(Math.random() * 1000),
                'FIELD16': Math.floor(Math.random() * 200),
                'FIELD17': Math.floor(Math.random() * 300),
                'FIELD18': Math.floor(Math.random() * 400),
                'FIELD19': Math.floor(Math.random() * 500),
                'FIELD20': Math.floor(Math.random() * 700),
                'FIELD21': Math.floor(Math.random() * 800),
                'FIELD22': Math.floor(Math.random() * 1000),
                'FIELD23': Math.floor(Math.random() * 2000),
                'FIELD24': Math.floor(Math.random() * 150),
                'FIELD25': Math.floor(Math.random() * 1000),
                'FIELD26': Math.floor(Math.random() * 100),
                'FIELD27': Math.floor(Math.random() * 400),
                'FIELD28': Math.floor(Math.random() * 600),
                'FIELD29': Math.floor(Math.random() * 500),
                'FIELD30': Math.floor(Math.random() * 300)
            });
        } else {
            virtualData.push({
                'TaskID': i + 1,
                'Crew': [],
                'FIELD1': names[Math.floor(Math.random() * names.length)],
                'FIELD2': 1967 + (i % 10),
                'FIELD3': Math.floor(Math.random() * 200),
                'FIELD4': Math.floor(Math.random() * 100),
                'FIELD5': Math.floor(Math.random() * 2000),
                'FIELD6': Math.floor(Math.random() * 1000),
                'FIELD7': Math.floor(Math.random() * 100),
                'FIELD8': Math.floor(Math.random() * 10),
                'FIELD9': Math.floor(Math.random() * 10),
                'FIELD10': Math.floor(Math.random() * 100),
                'FIELD11': Math.floor(Math.random() * 100),
                'FIELD12': Math.floor(Math.random() * 1000),
                'FIELD13': Math.floor(Math.random() * 10),
                'FIELD14': Math.floor(Math.random() * 10),
                'FIELD15': Math.floor(Math.random() * 1000),
                'FIELD16': Math.floor(Math.random() * 200),
                'FIELD17': Math.floor(Math.random() * 300),
                'FIELD18': Math.floor(Math.random() * 400),
                'FIELD19': Math.floor(Math.random() * 500),
                'FIELD20': Math.floor(Math.random() * 700),
                'FIELD21': Math.floor(Math.random() * 800),
                'FIELD22': Math.floor(Math.random() * 1000),
                'FIELD23': Math.floor(Math.random() * 2000),
                'FIELD24': Math.floor(Math.random() * 150),
                'FIELD25': Math.floor(Math.random() * 1000),
                'FIELD26': Math.floor(Math.random() * 100),
                'FIELD27': Math.floor(Math.random() * 400),
                'FIELD28': Math.floor(Math.random() * 600),
                'FIELD29': Math.floor(Math.random() * 500),
                'FIELD30': Math.floor(Math.random() * 300),
            });
        }
    }
    return virtualData;
}
});

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 for virtualization

Due to the element height limitation in browsers, the maximum number of records loaded by the treegrid is limited by the browser capability.
Cell selection will not be persisted in row.
Virtual scrolling is not compatible with detail template,clipboard functionality, Batch editing and row drag and drop features.
The page size provided must be two times larger than the number of visible rows in the TreeGrid. If the page size is failed to meet this condition then the size will be determined by TreeGrid.
The virtual height of the treegrid 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;
}

Programmatic selection using the selectRows method is not supported in virtual scrolling.

Contents

Row virtualization
Column virtualization
Limitations for virtualization

Contents

Row virtualization
Column virtualization
Limitations for virtualization

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!