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.
Apply
Reset
<dx-tree-view [createChildren]="createChildren" dataStructure="plain" rootValue="" [height]="500"> </dx-tree-view>
import { NgModule, Component } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { DxTreeViewModule } from 'devextreme-angular'; import { Service } from './app.service'; @Component({ selector: 'demo-app', templateUrl: 'app/app.component.html', providers: [Service] }) export class AppComponent { folderStructure: any; constructor(service: Service) { this.folderStructure = service.getFolderStructure(); } createChildren = (parent) => { let parentId = parent ? parent.itemData.id : "", fileNames = this.folderStructure[parentId]; return fileNames.map((fileName) => { let fullName = parentId ? parentId + "\\" + fileName : fileName; return { id: fullName, parentId: parentId, text: fileName, hasItems: !!this.folderStructure[fullName] }; }); } } @NgModule({ imports: [ BrowserModule, DxTreeViewModule ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);
import { Injectable } from '@angular/core'; let folderStructure: any = { "": [ "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" ] }; @Injectable() export class Service { getFolderStructure() { return folderStructure; } }
// In real applications, you should not transpile code in the browser. You can see how to create your own application with Angular 2 and DevExtreme here: // https://github.com/DevExpress/devextreme-angular/blob/master/README.md System.config({ transpiler: 'ts', typescriptOptions: { module: "commonjs", emitDecoratorMetadata: true, experimentalDecorators: true }, meta: { 'typescript': { "exports": "ts" } }, paths: { 'npm:': 'https://unpkg.com/' }, map: { 'ts': 'npm:plugin-typescript@4.0.10/lib/plugin.js', 'typescript': 'npm:typescript@2.0.6/lib/typescript.js', '@angular/core': 'npm:@angular/core@2.4.3/bundles/core.umd.js', '@angular/common': 'npm:@angular/common@2.4.3/bundles/common.umd.js', '@angular/compiler': 'npm:@angular/compiler@2.4.3/bundles/compiler.umd.js', '@angular/platform-browser': 'npm:@angular/platform-browser@2.4.3/bundles/platform-browser.umd.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@2.4.3/bundles/platform-browser-dynamic.umd.js', '@angular/http': 'npm:@angular/http@2.4.3/bundles/http.umd.js', '@angular/router': 'npm:@angular/router@3.4.3/bundles/router.umd.js', '@angular/forms': 'npm:@angular/forms@2.4.3/bundles/forms.umd.js', 'rxjs': 'npm:rxjs@5.0.3', 'devextreme': 'npm:devextreme@16.2', 'jquery': 'npm:jquery@3.1.1/dist/jquery.min.js', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'devextreme-angular': 'npm:devextreme-angular@16.2' }, packages: { 'app': { main: './app.component.ts', defaultExtension: 'ts' }, 'devextreme': { defaultExtension: 'js' }, 'devextreme-angular': { main: 'index.js', defaultExtension: 'js' } } });
<!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" /> <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://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/zone.js@0.6.25/dist/zone.js"></script> <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script> <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script> <script src="config.js"></script> <script> System.import('app').catch(console.error.bind(console)); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> </body> </html>