DevExtreme React - Enhance Performance on Large Datasets
If the TreeView performance is low, consider enabling the Virtual Mode. In this mode, the TreeView loads a set of child nodes once their parent node is expanded. The Virtual Mode can be enabled only if your data source satisfies the following conditions.
- It has a plain structure.
- Root nodes have the parentId field set to the rootValue.
- Nodes that do not have children, have the hasItems field set to false.
To enable the Virtual Mode, set the virtualModeEnabled option to true.
jQuery
var plainData = [ { id: 1, text: 'Fruits', parentId: -1 }, { id: 11, text: 'Apples', parentId: 1, hasItems: false }, { id: 12, text: 'Oranges', parentId: 1, hasItems: false }, { id: 2, text: 'Vegetables', parentId: -1 }, { id: 21, text: 'Cucumbers', parentId: 2, hasItems: false }, { id: 22, text: 'Tomatoes', parentId: 2, hasItems: false } ]; $(function() { $("#treeViewContainer").dxTreeView({ dataSource: plainData, dataStructure: 'plain', virtualModeEnabled: true, rootValue: -1 }); });
Angular
<dx-tree-view [dataSource]="plainData" dataStructure="plain" [virtualModeEnabled]="true" [rootValue]="-1"> </dx-tree-view>
import { DxTreeViewModule } from "devextreme-angular"; // ... export class AppComponent { plainData = [ { id: 1, text: 'Fruits', parentId: -1 }, { id: 11, text: 'Apples', parentId: 1, hasItems: false }, { id: 12, text: 'Oranges', parentId: 1, hasItems: false }, { id: 2, text: 'Vegetables', parentId: -1 }, { id: 21, text: 'Cucumbers', parentId: 2, hasItems: false }, { id: 22, text: 'Tomatoes', parentId: 2, hasItems: false } ]; } @NgModule({ imports: [ // ... DxTreeViewModule ], // ... })
Vue
<template> <DxTreeView data-structure="plain" :data-source="plainData" :virtual-mode-enabled="true" :root-value="-1" /> </template> <script> import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import { DxTreeView } from 'devextreme-vue/tree-view'; const plainData = [ { id: 1, text: 'Fruits', parentId: -1 }, { id: 11, text: 'Apples', parentId: 1, hasItems: false }, { id: 12, text: 'Oranges', parentId: 1, hasItems: false }, { id: 2, text: 'Vegetables', parentId: -1 }, { id: 21, text: 'Cucumbers', parentId: 2, hasItems: false }, { id: 22, text: 'Tomatoes', parentId: 2, hasItems: false } ]; export default { components: { DxTreeView }, data() { return { plainData }; }, }; </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import TreeView from 'devextreme-react/tree-view'; const plainData = [ { id: 1, text: 'Fruits', parentId: -1 }, { id: 11, text: 'Apples', parentId: 1, hasItems: false }, { id: 12, text: 'Oranges', parentId: 1, hasItems: false }, { id: 2, text: 'Vegetables', parentId: -1 }, { id: 21, text: 'Cucumbers', parentId: 2, hasItems: false }, { id: 22, text: 'Tomatoes', parentId: 2, hasItems: false } ]; class App extends React.Component { render() { return ( <TreeView dataStructure="plain" dataSource={plainData} virtualModeEnabled={true} rootValue={-1} /> ); } } export default App;
If the Virtual Mode does not meet your requirements, you can get full control over nodes and how to load them in the createChildren function. This function will be called at the beginning of the widget's lifetime and each time a user expands a node whose child nodes have not been loaded yet.
jQuery
$(function() { $("#treeViewContainer").dxTreeView({ createChildren: function (parentNode) { var d = $.Deferred(); $.get("https://mydomain.com/MyDataService", { parentId: parentNode ? JSON.stringify(parentNode.key) : "0" }) .done(function (result) { d.resolve(result); }); return d.promise(); }, dataStructure: 'plain' }); });
Angular
<dx-tree-view [createChildren]="createChildren" dataStructure="plain"> </dx-tree-view>
import { ..., Inject } from "@angular/core"; import { HttpClient, HttpClientModule, HttpParams } from "@angular/common/http"; import "rxjs/add/operator/toPromise"; import { DxTreeViewModule } from "devextreme-angular"; // ... export class AppComponent { constructor(@Inject(HttpClient) httpClient: HttpClient) { } createChildren = (parentNode) => { let params: HttpParams = new HttpParams() .set("parentId", parentNode ? JSON.stringify(parentNode.key) : "0"); return httpClient.get("https://mydomain.com/MyDataService", { params: params }) .toPromise(); } } @NgModule({ imports: [ // ... DxTreeViewModule, HttpClientModule ], // ... })
Vue
<template> <DxTreeView data-structure="plain" :create-children="createChildren" /> </template> <script> import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import { DxTreeView } from 'devextreme-vue/tree-view'; import 'whatwg-fetch'; export default { components: { DxTreeView }, methods: { createChildren: function(parent) { const parentId = parent ? parent.itemData.id : ''; return fetch(`https://mydomain.com/MyDataService?parentId=${parentId}`) .then(response => response.json()) .catch(() => { throw 'Data Loading Error'; }); } } }; </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import TreeView from 'devextreme-react/tree-view'; import 'whatwg-fetch'; class App extends React.Component { render() { return ( <TreeView dataStructure="plain" createChildren={this.createChildren} /> ); } createChildren(parent) { const parentId = parent ? parent.itemData.id : ''; return fetch(`https://mydomain.com/MyDataService?parentId=${parentId}`) .then(response => response.json()) .catch(() => { throw 'Data Loading Error'; }); } } export default App;
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.