Your search did not match any results.
Tree List

Load Data on Demand

This example demonstrates how to load data on demand every time a user expands a TreeList node. For this purpose, filtering is delegated to the server, and IDs of expanded nodes are sent to the server with every request for data.

Copy to CodeSandBox
import React from 'react'; import { TreeList, RemoteOperations, Column } from 'devextreme-react/tree-list'; import 'whatwg-fetch'; const dataSource = { load: function(loadOptions) { let parentIdsParam = loadOptions.parentIds.join(','); return fetch(`${parentIdsParam}`) .then(response => response.json()) .catch(() => { throw 'Data Loading Error'; }); } }; class App extends React.Component { render() { return ( <TreeList id={'treelist'} dataSource={dataSource} showBorders={true} keyExpr={'id'} parentIdExpr={'parentId'} hasItemsExpr={'hasItems'} rootValue={''} > <RemoteOperations filtering={true} /> <Column dataField={'name'} /> <Column width={100} customizeText={this.customizeText} dataField={'size'} /> <Column width={150} dataField={'createdDate'} dataType={'date'} /> <Column width={150} dataField={'modifiedDate'} dataType={'date'} /> </TreeList> ); } customizeText(e) { if (e.value !== null) { return `${Math.ceil(e.value / 1024) } KB`; } } } 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="" /> <link rel="dx-theme" data-theme="generic.light" href="" /> <link rel="stylesheet" type ="text/css" href="styles.css" /> <script src=""></script> <script src=""></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import('./index.js'); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>
#treelist { max-height: 440px; }
System.config({ transpiler: 'plugin-babel', paths: { 'npm:': '' }, 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@18.2', 'devextreme-react': 'npm:devextreme-react@18.2', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.6/dist/quill.js', 'whatwg-fetch': 'npm:whatwg-fetch@2.0.4/fetch.js', // 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 } });