Your search did not match any results.
Tree View

Load Data on Demand

Documentation
In those special cases when the built-in Virtual Mode fails, you can gain full control over data loading in the createChildren function.This function is called each time a user expands the TreeView node that has not been expanded before. In the createChildren function, you get data from a server or other sources and then form the collection of child nodes from this data.
Copy to Codepen
Apply
Reset
var DemoApp = angular.module('DemoApp', ['dx']); DemoApp.controller('DemoController', function DemoController($scope) { $scope.treeViewOptions = { createChildren: function(parent) { var parentId = parent ? parent.itemData.id : ""; var fileNames = folderStructure[parentId]; return fileNames.map(function(fileName) { var fullName = parentId ? parentId + "\\" + fileName : fileName; return { id: fullName, parentId: parentId, text: fileName, hasItems: !!folderStructure[fullName] }; }); }, dataStructure: "plain", rootValue: "", height: 500 }; });
<!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.5/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.5/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/16.2.5/css/dx.light.css" /> <link rel="dx-theme" data-theme="android5.light" href="https://cdn3.devexpress.com/jslib/16.2.5/css/dx.android5.light.css" /> <link rel="dx-theme" data-theme="ios7.default" href="https://cdn3.devexpress.com/jslib/16.2.5/css/dx.ios7.default.css" /> <link rel="dx-theme" data-theme="win10.black" href="https://cdn3.devexpress.com/jslib/16.2.5/css/dx.win10.black.css" /> <link rel="dx-theme" data-theme="win10.white" href="https://cdn3.devexpress.com/jslib/16.2.5/css/dx.win10.white.css" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script> <script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C\/script%3E'))</script> <script src="https://cdn3.devexpress.com/jslib/16.2.5/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" ng-app="DemoApp" ng-controller="DemoController"> <div class="form"> <div id="simple-treeview" dx-tree-view="treeViewOptions"></div> </div> </div> </body> </html>
var folderStructure = { "": [ "App_Data", "App_Start", "Content", "Controllers", "fonts", "Models", "packages", "Properties", "Scripts", "ViewModels", "Views", "DevExtreme.MVC.Demos.csproj", "DevExtreme.MVC.Demos.csproj.user", "DevExtreme.MVC.Demos.sln", "Extensions.cs", "favicon.ico", "Global.asax", "Global.asax.cs", "NuGet.Config", "packages.config", "Web.config", "Web.Debug.config", "Web.Release.config" ], "Content": [ "DevExtreme", "images", "SampleData", "bootstrap.css", "site.css" ], "Content\\DevExtreme": [ "icons", "dx.android5.light.css", "dx.common.css", "dx.contrast.compact.css", "dx.contrast.css", "dx.dark.compact.css", "dx.dark.css", "dx.ios7.default.css", "dx.light.compact.css", "dx.light.css", "dx.spa.css", "dx.win10.black.css", "dx.win10.white.css" ], "Content\\images": [ "Gallery", "Layout", "Menu", "TreeView" ], "Controllers": [ "ApiControllers", "AccordionController.cs", "ChartsController.cs", "DataGridController.cs", "EditorsController.cs", "FileUploaderController.cs", "FormController.cs", "GalleryController.cs", "GeoMapController.cs", "ListController.cs", "MenuController.cs", "OverlaysController.cs", "PivotGridController.cs", "SchedulerController.cs", "TabPanelController.cs", "ToolbarController.cs", "TreeViewController.cs" ], "Models": [ "Demos", "Navigation", "Northwind", "SampleData", "Company.cs", "Customer.cs", "DaySales.cs", "Employee.cs", "MenuItem.cs", "Product.cs", "SchedulerResource.cs", "State.cs", "User.cs" ], "packages": [ "Antlr.3.5.0.2", "bootstrap.3.3.6", "DevExtreme.AspNet.Data.1.1.0", "EntityFramework.6.1.3", "jQuery.2.2.3", "Microsoft.AspNet.Mvc.5.2.3", "Microsoft.AspNet.Razor.3.2.3", "Microsoft.AspNet.Web.Optimization.1.1.3", "Microsoft.AspNet.WebApi.5.2.3", "Microsoft.AspNet.WebApi.Client.5.2.3", "Microsoft.AspNet.WebApi.Core.5.2.3", "Microsoft.AspNet.WebApi.WebHost.5.2.3", "Microsoft.AspNet.WebPages.3.2.3", "Microsoft.Web.Infrastructure.1.0.0.0", "Newtonsoft.Json.8.0.3", "WebGrease.1.6.0" ], "packages\\Antlr.3.5.0.2": [ "lib", "Antlr.3.5.0.2.nupkg" ], "packages\\bootstrap.3.3.6": [ "content", "bootstrap.3.3.6.nupkg" ], "packages\\bootstrap.3.3.6\\content": [ "Content", "fonts", "Scripts" ], "packages\\DevExtreme.AspNet.Data.1.1.0": [ "lib", "DevExtreme.AspNet.Data.1.1.0.nupkg" ], "packages\\DevExtreme.AspNet.Data.1.1.0\\lib": [ "net40", "netstandard1.0" ], "packages\\EntityFramework.6.1.3": [ "content", "lib", "tools", "EntityFramework.6.1.3.nupkg" ], "packages\\EntityFramework.6.1.3\\lib": [ "net40", "net45" ], "packages\\jQuery.2.2.3": [ "Content", "Tools", "jQuery.2.2.3.nupkg" ], "packages\\jQuery.2.2.3\\Content": [ "Scripts" ], "packages\\Microsoft.AspNet.Mvc.5.2.3": [ "Content", "lib", "Microsoft.AspNet.Mvc.5.2.3.nupkg" ], "packages\\Microsoft.AspNet.Mvc.5.2.3\\lib": [ "net45" ], "packages\\Microsoft.AspNet.Razor.3.2.3": [ "lib", "Microsoft.AspNet.Razor.3.2.3.nupkg" ], "packages\\Microsoft.AspNet.Razor.3.2.3\\lib": [ "net45" ], "packages\\Microsoft.AspNet.Web.Optimization.1.1.3": [ "lib", "Microsoft.AspNet.Web.Optimization.1.1.3.nupkg" ], "packages\\Microsoft.AspNet.Web.Optimization.1.1.3\\lib": [ "net40" ], "packages\\Microsoft.AspNet.WebApi.Client.5.2.3": [ "lib", "Microsoft.AspNet.WebApi.Client.5.2.3.nupkg" ], "packages\\Microsoft.AspNet.WebApi.Client.5.2.3\\lib": [ "net45", "portable-wp8+netcore45+net45+wp81+wpa81" ], "packages\\Microsoft.AspNet.WebApi.Core.5.2.3": [ "Content", "lib", "Microsoft.AspNet.WebApi.Core.5.2.3.nupkg" ], "packages\\Microsoft.AspNet.WebApi.Core.5.2.3\\lib": [ "net45" ], "packages\\Microsoft.AspNet.WebApi.WebHost.5.2.3": [ "lib", "Microsoft.AspNet.WebApi.WebHost.5.2.3.nupkg" ], "packages\\Microsoft.AspNet.WebApi.WebHost.5.2.3\\lib": [ "net45" ], "packages\\Microsoft.AspNet.WebPages.3.2.3": [ "Content", "lib", "Microsoft.AspNet.WebPages.3.2.3.nupkg" ], "packages\\Microsoft.AspNet.WebPages.3.2.3\\lib": [ "net45" ], "packages\\Microsoft.Web.Infrastructure.1.0.0.0": [ "lib", "Microsoft.Web.Infrastructure.1.0.0.0.nupkg" ], "packages\\Microsoft.Web.Infrastructure.1.0.0.0\\lib": [ "net40" ], "packages\\Newtonsoft.Json.8.0.3": [ "lib", "tools", "Newtonsoft.Json.8.0.3.nupkg" ], "packages\\Newtonsoft.Json.8.0.3\\lib": [ "net20", "net35", "net40", "net45", "portable-net40+sl5+wp80+win8+wpa81", "portable-net45+wp80+win8+wpa81+dnxcore50" ], "packages\\WebGrease.1.6.0": [ "lib", "tools", "WebGrease.1.6.0.nupkg" ], "Scripts": [ "aspnet", "cldr", "globalize", "vectormap-data", "cldr.js", "cldr.min.js", "dx.all.debug.js", "dx.all.js", "globalize.js", "globalize.min.js", "jquery-1.12.3.js", "jquery-1.12.3.min.js", "jquery-2.2.3.js", "jquery-2.2.3.min.js", "jquery-3.1.0.js", "jquery-3.1.0.min.js", "_references.js" ], "Views": [ "Accordion", "Charts", "DataGrid", "Editors", "FileUploader", "Form", "Gallery", "GeoMap", "List", "Menu", "Overlays", "PivotGrid", "Scheduler", "Shared", "TabPanel", "Toolbar", "TreeView", "Web.config", "_ViewStart.cshtml" ], "App_Data": [ "demos.xml", "Northwind.mdf" ], "App_Start": [ "BundleConfig.cs", "FilterConfig.cs", "RouteConfig.cs", "WebApiConfig.cs" ], "Content\\DevExtreme\\icons": [ "dxicons.ttf", "dxicons.woff", "dxiconsios.ttf", "dxiconsios.woff" ], "Content\\images\\Gallery": [ "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "8.jpg", "9.jpg" ], "Content\\images\\Layout": [ "dx-footer-logo.png", "dx-header-logo.png", "icon-buy-hover.svg", "icon-buy.svg", "icon-trial-hover.svg", "icon-trial.svg" ], "Content\\images\\Menu": [ "treeview_collapsed_icon.png", "treeview_expanded_icon.png" ], "Content\\images\\TreeView": [ "1.png", "10.png", "11.png", "12.png", "13.png", "14.png", "15.png", "16.png", "17.png", "18.png", "19.png", "2.png", "3.png", "4.png", "5.png", "6.png", "7.png", "8.png", "9.png" ], "Content\\SampleData": [ "Copper.json", "Stock.json", "TreeMap.json", "VectorMap.json", "Wind.json" ], "Controllers\\ApiControllers": [ "ChartsDataController.cs", "DataGridAjaxController.cs", "DataGridRecordPagingController.cs", "DataGridScrollingController.cs", "DataGridStatesLookupController.cs", "DataGridWebApiController.cs", "ListDataController.cs", "PivotGridDataController.cs", "SchedulerDataController.cs", "SiteNavigationDataController.cs", "TreeViewDataController.cs" ], "fonts": [ "glyphicons-halflings-regular.eot", "glyphicons-halflings-regular.svg", "glyphicons-halflings-regular.ttf", "glyphicons-halflings-regular.woff" ], "Models\\Demos": [ "MvcDemo.cs", "MvcDemoFile.cs", "MvcDemoFileParser.cs", "MvcDemoFiles.cs", "MvcDemos.cs", "MvcDemosStore.cs" ], "Models\\Navigation": [ "NavigationNode.cs", "NavigationNodes.cs" ], "Models\\Northwind": [ "Category.cs", "Customer.cs", "Employee.cs", "NorthwindContext.cs", "Order.cs", "Order_Detail.cs", "Product.cs", "Shipper.cs", "Supplier.cs" ], "Models\\SampleData": [ "Companies.cs", "Customers.cs", "DaySalesData.cs", "Employees.cs", "MenuData.cs", "Products.cs", "States.cs", "TabpanelData.cs", "TreeViewHierarchicalData.cs", "TreeViewPlainData.cs" ], "packages\\Antlr.3.5.0.2\\lib": [ "Antlr3.Runtime.dll", "Antlr3.Runtime.pdb" ], "packages\\bootstrap.3.3.6\\content\\Content": [ "bootstrap-theme.css", "bootstrap-theme.css.map", "bootstrap-theme.min.css", "bootstrap-theme.min.css.map", "bootstrap.css", "bootstrap.css.map", "bootstrap.min.css", "bootstrap.min.css.map" ], "packages\\bootstrap.3.3.6\\content\\fonts": [ "glyphicons-halflings-regular.eot", "glyphicons-halflings-regular.svg", "glyphicons-halflings-regular.ttf", "glyphicons-halflings-regular.woff", "glyphicons-halflings-regular.woff2" ], "packages\\bootstrap.3.3.6\\content\\Scripts": [ "bootstrap.js", "bootstrap.min.js" ], "packages\\DevExtreme.AspNet.Data.1.1.0\\lib\\net40": [ "DevExtreme.AspNet.Data.dll" ], "packages\\DevExtreme.AspNet.Data.1.1.0\\lib\\netstandard1.0": [ "DevExtreme.AspNet.Data.dll" ], "packages\\EntityFramework.6.1.3\\content": [ "App.config.transform", "Web.config.transform" ], "packages\\EntityFramework.6.1.3\\lib\\net40": [ "EntityFramework.dll", "EntityFramework.SqlServer.dll", "EntityFramework.SqlServer.xml", "EntityFramework.xml" ], "packages\\EntityFramework.6.1.3\\lib\\net45": [ "EntityFramework.dll", "EntityFramework.SqlServer.dll", "EntityFramework.SqlServer.xml", "EntityFramework.xml" ], "packages\\EntityFramework.6.1.3\\tools": [ "about_EntityFramework.help.txt", "EntityFramework.PowerShell.dll", "EntityFramework.PowerShell.Utility.dll", "EntityFramework.psd1", "EntityFramework.psm1", "init.ps1", "install.ps1", "migrate.exe" ], "packages\\jQuery.2.2.3\\Content\\Scripts": [ "jquery-2.2.3-vsdoc.js", "jquery-2.2.3.js", "jquery-2.2.3.min.js", "jquery-2.2.3.min.map" ], "packages\\jQuery.2.2.3\\Tools": [ "common.ps1", "install.ps1", "jquery-2.2.3.intellisense.js", "uninstall.ps1" ], "packages\\Microsoft.AspNet.Mvc.5.2.3\\Content": [ "Web.config.install.xdt", "Web.config.uninstall.xdt" ], "packages\\Microsoft.AspNet.Mvc.5.2.3\\lib\\net45": [ "System.Web.Mvc.dll", "System.Web.Mvc.xml" ], "packages\\Microsoft.AspNet.Razor.3.2.3\\lib\\net45": [ "System.Web.Razor.dll", "System.Web.Razor.xml" ], "packages\\Microsoft.AspNet.Web.Optimization.1.1.3\\lib\\net40": [ "System.Web.Optimization.dll", "system.web.optimization.xml" ], "packages\\Microsoft.AspNet.WebApi.5.2.3": [ "Microsoft.AspNet.WebApi.5.2.3.nupkg" ], "packages\\Microsoft.AspNet.WebApi.Client.5.2.3\\lib\\net45": [ "System.Net.Http.Formatting.dll", "System.Net.Http.Formatting.xml" ], "packages\\Microsoft.AspNet.WebApi.Client.5.2.3\\lib\\portable-wp8+netcore45+net45+wp81+wpa81": [ "System.Net.Http.Formatting.dll", "System.Net.Http.Formatting.xml" ], "packages\\Microsoft.AspNet.WebApi.Core.5.2.3\\Content": [ "web.config.transform" ], "packages\\Microsoft.AspNet.WebApi.Core.5.2.3\\lib\\net45": [ "System.Web.Http.dll", "System.Web.Http.xml" ], "packages\\Microsoft.AspNet.WebApi.WebHost.5.2.3\\lib\\net45": [ "System.Web.Http.WebHost.dll", "System.Web.Http.WebHost.xml" ], "packages\\Microsoft.AspNet.WebPages.3.2.3\\Content": [ "Web.config.install.xdt", "Web.config.uninstall.xdt" ], "packages\\Microsoft.AspNet.WebPages.3.2.3\\lib\\net45": [ "System.Web.Helpers.dll", "System.Web.Helpers.xml", "System.Web.WebPages.Deployment.dll", "System.Web.WebPages.Deployment.xml", "System.Web.WebPages.dll", "System.Web.WebPages.Razor.dll", "System.Web.WebPages.Razor.xml", "System.Web.WebPages.xml" ], "packages\\Microsoft.Web.Infrastructure.1.0.0.0\\lib\\net40": [ "Microsoft.Web.Infrastructure.dll" ], "packages\\Newtonsoft.Json.8.0.3\\lib\\net20": [ "Newtonsoft.Json.dll", "Newtonsoft.Json.xml" ], "packages\\Newtonsoft.Json.8.0.3\\lib\\net35": [ "Newtonsoft.Json.dll", "Newtonsoft.Json.xml" ], "packages\\Newtonsoft.Json.8.0.3\\lib\\net40": [ "Newtonsoft.Json.dll", "Newtonsoft.Json.xml" ], "packages\\Newtonsoft.Json.8.0.3\\lib\\net45": [ "Newtonsoft.Json.dll", "Newtonsoft.Json.xml" ], "packages\\Newtonsoft.Json.8.0.3\\lib\\portable-net40+sl5+wp80+win8+wpa81": [ "Newtonsoft.Json.dll", "Newtonsoft.Json.xml" ], "packages\\Newtonsoft.Json.8.0.3\\lib\\portable-net45+wp80+win8+wpa81+dnxcore50": [ "Newtonsoft.Json.dll", "Newtonsoft.Json.xml" ], "packages\\Newtonsoft.Json.8.0.3\\tools": [ "install.ps1" ], "packages\\WebGrease.1.6.0\\lib": [ "WebGrease.dll" ], "packages\\WebGrease.1.6.0\\tools": [ "WG.EXE" ], "Properties": [ "AssemblyInfo.cs" ], "Scripts\\aspnet": [ "dx.aspnet.data.js", "dx.aspnet.mvc.js" ], "Scripts\\cldr": [ "event.js", "event.min.js", "supplemental.js", "supplemental.min.js", "unresolved.js", "unresolved.min.js" ], "Scripts\\globalize": [ "currency.js", "currency.min.js", "date.js", "date.min.js", "message.js", "message.min.js", "number.js", "number.min.js" ], "Scripts\\vectormap-data": [ "africa.js", "canada.js", "eurasia.js", "europe.js", "usa.js", "world.js" ], "ViewModels": [ "AgeVerificationAttribute.cs", "EditorsViewModel.cs", "FormViewModel.cs", "GalleryViewModel.cs" ], "Views\\Accordion": [ "Overview.cshtml" ], "Views\\Charts": [ "AjaxRequest.cshtml", "AutoCalculatedBarWidth.cshtml", "CustomBarWidth.cshtml", "FullStackedBar.cshtml", "Line.cshtml", "SideBySideBar.cshtml", "SideBySideFullStackedBar.cshtml", "SideBySideStackedBar.cshtml", "StackedBar.cshtml", "StandardBar.cshtml" ], "Views\\DataGrid": [ "AjaxRequest.cshtml", "BatchEditing.cshtml", "CellEditingAndEditingAPI.cshtml", "InfiniteScrolling.cshtml", "ODataService.cshtml", "RecordPaging.cshtml", "RowEditingAndEditingEvents.cshtml", "VirtualScrolling.cshtml", "WebAPIService.cshtml" ], "Views\\Editors": [ "Overview.cshtml", "Validation.cshtml" ], "Views\\FileUploader": [ "FileUploading.cshtml" ], "Views\\Form": [ "Overview.cshtml", "Validation.cshtml" ], "Views\\Gallery": [ "Overview.cshtml" ], "Views\\GeoMap": [ "Overview.cshtml" ], "Views\\List": [ "WebApi.cshtml" ], "Views\\Menu": [ "Overview.cshtml" ], "Views\\Overlays": [ "Overview.cshtml" ], "Views\\PivotGrid": [ "LocalDataSource.cshtml" ], "Views\\Scheduler": [ "WebApi.cshtml" ], "Views\\Shared": [ "Error.cshtml", "_DemoDescription.cshtml", "_DemoTitle.cshtml", "_Layout.cshtml", "_LayoutNavigation.cshtml", "_WidgetsMenu.cshtml" ], "Views\\TabPanel": [ "Overview.cshtml" ], "Views\\Toolbar": [ "Overview.cshtml" ], "Views\\TreeView": [ "FlatDataStructure.cshtml", "HierarchicalDataStructure.cshtml", "LoadDataOnDemand.cshtml" ] }