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.
@(Html.DevExtreme().TreeList() .ID("treelist") .DataSource(new JS("treeList_dataSource")) .KeyExpr("id") .ParentIdExpr("parentId") .HasItemsExpr("hasItems") .RemoteOperations(r => r.Filtering(true)) .Columns(columns => { columns.Add() .DataField("name"); columns.Add() .DataField("size") .CustomizeText("treeList_size_customizeText") .Width(100); columns.Add() .DataField("createdDate") .DataType(GridColumnDataType.Date) .Width(150); columns.Add() .DataField("modifiedDate") .DataType(GridColumnDataType.Date) .Width(150); }) .RootValue("") ) <script> function treeList_size_customizeText(e) { if(e.value !== null) { return Math.ceil(e.value / 1024) + " KB"; } } var treeList_dataSource = { load: function(options) { return $.ajax({ url: "@Url.Content("~/api/TreeListData/Get")", data: { parentIds: options.parentIds.join(",") } }); } }; </script>
using System.Web.Mvc; using DevExtreme.MVC.Demos.Models.SampleData; namespace DevExtreme.MVC.Demos.Controllers { public class TreeListController : Controller { public ActionResult LoadDataOnDemand() { return View(); } } }
using System; using System.Linq; using System.Net.Http; using System.Web.Http; using System.Web.Hosting; using System.IO; using System.Web.Http.Cors; namespace DevExtreme.MVC.Demos.Controllers.ApiControllers { [EnableCors(origins: "*", headers: "*", methods: "*", SupportsCredentials = true)] public class TreeListDataController : ApiController { [HttpGet] public HttpResponseMessage Get([FromUri] string[] parentIds) { var rootPath = HostingEnvironment.MapPath("~").TrimEnd('\\'); var childNodes = parentIds.SelectMany(parentId => { var parentPath = String.IsNullOrEmpty(parentId) ? rootPath : Path.Combine(rootPath, parentId); return Directory.EnumerateFileSystemEntries(parentPath); }) .Where(path => Path.GetFullPath(path).StartsWith(rootPath)) .Select(path => { var fileInfo = new FileInfo(path); var isDirectory = File.GetAttributes(path).HasFlag(FileAttributes.Directory); var parentId = Path.GetDirectoryName(path.Substring(rootPath.Length + 1)); return new { id = Path.Combine(parentId, Path.GetFileName(path)), parentId = parentId, name = Path.GetFileName(path), modifiedDate = fileInfo.LastWriteTime, createdDate = fileInfo.CreationTime, size = isDirectory ? (long?)null : fileInfo.Length, isDirectory = isDirectory, hasItems = isDirectory && Directory.EnumerateFileSystemEntries(path).Count() > 0 }; }) .Where(i => i.name != "bin" && i.name != "obj" && i.name != "packages" && i.name.Length > 0 && !i.name.StartsWith(".")) .OrderByDescending(i => i.isDirectory) .ThenBy(i => i.name); return Request.CreateResponse(childNodes); } } }
#treelist { max-height: 440px; }