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
Apply
Reset
<template> <div> <dx-tree-list id="treelist" :data-source="dataSource" :show-borders="true" key-expr="id" parent-id-expr="parentId" has-items-expr="hasItems" root-value="" > <dx-remote-operations :filtering="true" /> <dx-column data-field="name" /> <dx-column :width="100" :customize-text="customizeText" data-field="size" /> <dx-column :width="150" data-field="createdDate" data-type="date" /> <dx-column :width="150" data-field="modifiedDate" data-type="date" /> </dx-tree-list> </div> </template> <script> import { DxTreeList, DxRemoteOperations, DxColumn } from 'devextreme-vue/tree-list'; import 'whatwg-fetch'; export default { components: { DxTreeList, DxRemoteOperations, DxColumn }, data() { return { 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'; }); } } }; }, methods: { customizeText(e) { if(e.value !== null) { return `${Math.ceil(e.value / 1024) } KB`; } } } }; </script> <style scoped> #treelist { max-height: 440px; } </style>
import Vue from 'vue'; import App from './App.vue'; new Vue({ el: '#app', components: { App }, template: '<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> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> <span v-if="false">Loading...</span> </div> </div> </body> </html>
System.config({ transpiler: 'plugin-babel', paths: { 'npm:': 'https://unpkg.com/' }, map: { vue: 'npm:vue@2.5.16/dist/vue.esm.browser.js', 'vue-loader': 'npm:systemjs-vue-browser@latest/index.js', 'devextreme': 'npm:devextreme@19.1', 'devextreme-vue': 'npm:devextreme-vue@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', 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, meta: { '*.vue': { loader: 'vue-loader' } }, packages: { 'devextreme-vue': { main: 'index.js' }, 'devextreme': { defaultExtension: 'js' } }, babelOptions: { sourceMaps: false, stage0: true } });