JavaScript/jQuery Tree View - Virtual Mode

In virtual mode, the JavaScript TreeView loads a node's children when the node is expanded for the first time. This enhances performance on large datasets.

To enable this feature, set the virtualModeEnabled property to true. Note that this mode is only available when the JavaScript TreeView's dataStructure is plain.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

$(() => { $('#simple-treeview').dxTreeView({ dataSource: new DevExpress.data.DataSource({ store: new DevExpress.data.ODataStore({ version: 2, url: 'https://js.devexpress.com/Demos/WidgetsGallery/odata/HierarchicalItems', }), }), dataStructure: 'plain', keyExpr: 'Id', displayExpr: 'Name', parentIdExpr: 'CategoryId', hasItemsExpr: 'IsGroup', virtualModeEnabled: true, }); });

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.1.7/css/dx.light.css" /> <script src="js/dx.all.js"></script> <script src="data.js"></script> <script src="index.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="simple-treeview"></div> </div> </body> </html>

When the data source is remote, the JavaScript TreeView requests data for each expanded node. To prevent this for nodes that do not nest others, set the hasItems field to false for the corresponding data objects.

This demo enables virtual mode with a remote data source and uses the hasItemsExpr property to specify a custom name for the hasItems field.

As an alternative to virtual mode, you can use a custom logic to process requested data. To do this, specify the createChildren function as shown in the Load Data on Demand demo.