Your search did not match any results.
Tree View

Virtual Mode

In virtual mode, the 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 TreeView's dataStructure is plain.

When the data source is remote, the 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.

Backend API
Copy to CodePen
Apply
Reset
window.onload = function() { var viewModel = { treeViewOptions: { dataSource: new DevExpress.data.DataSource({ store: new DevExpress.data.ODataStore({ url: "https://js.devexpress.com/Demos/WidgetsGallery/odata/HierarchicalItems" }) }), dataStructure: "plain", keyExpr: "Id", displayExpr: "Name", parentIdExpr: "CategoryId", hasItemsExpr: "IsGroup", virtualModeEnabled: true } }; ko.applyBindings(viewModel, document.getElementById("treeview")); };
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <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=1.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> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.1.5/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.1.5/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/21.1.5/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="treeview"> <div data-bind="dxTreeView: treeViewOptions"></div> </div> </div> </body> </html>