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 CodeSandBox
Apply
Reset
import React from 'react'; import TreeView from 'devextreme-react/tree-view'; import { folderStructure } from './data.js'; class App extends React.Component { render() { return ( <React.Fragment> <TreeView dataStructure={'plain'} rootValue={''} height={500} createChildren={this.createChildren} /> </React.Fragment> ); } createChildren(parent) { let parentId = parent ? parent.itemData.id : '', fileNames = folderStructure[parentId]; if (!fileNames) return []; return fileNames.map((fileName) => { let fullName = parentId ? `${parentId }\\${ fileName}` : fileName; return { id: fullName, parentId: parentId, text: fileName, hasItems: !!folderStructure[fullName] }; }); } } export default App;
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render( <App />, document.getElementById('app') );
<!DOCTYPE html> <html> <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/19.1.3/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/19.1.3/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import('./index.js'); </script> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>
export const folderStructure = { '': [ 'App_Data', 'App_Start', 'Content', 'Controllers', 'fonts', 'lib', 'Models', 'packages', 'Properties', 'Scripts', 'ViewModels', 'Views', 'DevExtreme.MVC.Demos.csproj', '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.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' ], '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', '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\\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.js', 'jquery.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' ], 'lib': [ 'DevExtreme' ], 'lib\\DevExtreme': [ 'DevExtreme.AspNet.Data.dll', 'DevExtreme.AspNet.Mvc.dll', 'DevExtreme.AspNet.Mvc.pdb', 'DevExtreme.AspNet.Mvc.xml' ], '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\\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' ] };
System.config({ transpiler: 'plugin-babel', paths: { 'npm:': 'https://unpkg.com/' }, defaultExtension: 'js', map: { 'react': 'npm:react@16/umd/react.development.js', 'react-dom': 'npm:react-dom@16/umd/react-dom.development.js', 'prop-types': 'npm:prop-types/prop-types.js', 'devextreme': 'npm:devextreme@19.1', 'devextreme-react': 'npm:devextreme-react@19.1', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.6/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram', // SystemJS plugins 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, packages: { 'devextreme': { defaultExtension: 'js' }, 'devextreme-react': { main: 'index.js' } }, babelOptions: { sourceMaps: false, stage0: true, react: true } });