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.

See more Hide details

Prev Demo Next Demo

Was this demo helpful?

Thank you!

Send Feedback

Thank you!
We appreciate your feedback.

jQuery

Angular

Vue

React

AngularJS

ASP.NET Core

ASP.NET MVC

Copy to CodeSandBox

Apply

Reset

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(`https://js.devexpress.com/Demos/Mvc/api/treeListData?parentIds=${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="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" /> <link rel="stylesheet" type ="text/css" href="styles.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> </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:': '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', '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 } });