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.

Copy to CodePen
Apply
Reset
var DemoApp = angular.module('DemoApp', ['dx']); DemoApp.controller('DemoController', function DemoController($scope) { $scope.treeListOptions = { dataSource: { load: function(options) { return $.ajax({ url: "https://js.devexpress.com/Demos/Mvc/api/treeListData", dataType: "json", data: { parentIds: options.parentIds } }); } }, remoteOperations: { filtering: true }, keyExpr: "id", parentIdExpr: "parentId", hasItemsExpr: "hasItems", rootValue: "", showBorders: true, columns: [ { dataField: "name" }, { dataField: "size", width: 100, customizeText: function(e) { if(e.value !== null) { return Math.ceil(e.value / 1024) + " KB"; } } }, { dataField: "createdDate", dataType: "date", width: 150 }, { dataField: "modifiedDate", dataType: "date", width: 150 } ] }; });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" > <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" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <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" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script> <script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C/script%3E'))</script> <script src="https://cdn3.devexpress.com/jslib/20.2.7/js/dx.all.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container" ng-app="DemoApp" ng-controller="DemoController"> <div id="treelist" dx-tree-list="treeListOptions"></div> </div> </body> </html>
#treelist { max-height: 440px; }