Your search did not match any results.
Tree View

Virtual Mode

API Reference
The dxTreeView widget can initially load only root items, while child items are loaded when their parent is expanded. In this demo, the tree view is associated with a remote data service, which has a long response time. The widget displays the loading indicator when data is being loaded.
Copy to Codepen
Apply
Reset
$(function(){ $("#simple-treeview").dxTreeView({ 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 }); });
<!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="js/jquery-3.1.0.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/16.2.4/js/dx.all.js"></script> <script src="data.js"></script> <link rel="stylesheet" type ="text/css" href ="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="simple-treeview"></div> </div> </body> </html>