Free Trial Buy
    Your search did not match any results.
    Tree List

    Load Data on Demand

    The TreeList can load a remote dataset dynamically as a user expands nodes. The dataset must have a plain structure.

    This feature requires client- and server-side configurations. To configure the client-side part, do the following:

    1. Send an expanded node's ID to the server
      For this, implement the CustomStore's load function. In this demo, we do it in the dataSource configuration object.

    2. Delegate filtering to the server
      Set the remoteOperations.filtering property to true.

    3. Specify the data field that defines whether the node has children
      Use the hasItemsExpr property to set this data field.

    Server-side implementation is available in the ASP.NET Core and ASP.NET MVC versions of this demo under the TreeListDataController.cs tab.

    See more Hide details
    Prev Demo Next Demo

    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; 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/20.2.7/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.7/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', meta: { 'devextreme/localization.js': { "esModule": true }, }, paths: { 'npm:': 'https://unpkg.com/' }, defaultExtension: 'js', map: { 'react': 'npm:react@16.14.0/umd/react.development.js', 'react-dom': 'npm:react-dom@16.14.0/umd/react-dom.development.js', 'prop-types': 'npm:prop-types@15.7.2/prop-types.js', 'whatwg-fetch': 'npm:whatwg-fetch@2.0.4/fetch.js', 'rrule': 'npm:rrule@2.6.6/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.26.0/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@20.2.7', 'devextreme-react': 'npm:devextreme-react@20.2.7', 'jszip': 'npm:jszip@3.6.0/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@0.10.3/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.0.23/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@2.0.29/dist/dx-gantt.js', 'preact': 'npm:preact@10.5.13/dist/preact.js', 'preact/hooks': 'npm:preact@10.5.13/hooks/dist/hooks.js', // SystemJS plugins 'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js' }, packages: { 'devextreme': { defaultExtension: 'js' }, 'devextreme-react': { main: 'index.js' }, 'devextreme/events/utils': { main: 'index' }, 'devextreme/events': { main: 'index' }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js' } }, babelOptions: { sourceMaps: false, stage0: true, react: true } });