Tree View - Virtual Mode

In virtual mode, the TreeView loads a node's children when the node is expanded for the first time. This enhances performance on large datasets.

To enable this feature, set the virtualModeEnabled property to true. Note that this mode is only available when the TreeView's dataStructure is plain.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

@(Html.DevExtreme().TreeView() .DataSource(d => d.OData() .Version(2) .Url("https://js.devexpress.com/Demos/WidgetsGallery/odata/HierarchicalItems") ) .DataStructure(TreeViewDataStructure.Plain) .KeyExpr("Id") .DisplayExpr("Name") .ParentIdExpr("CategoryId") .HasItemsExpr("IsGroup") .VirtualModeEnabled(true) )

using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.MVC.Demos.Models; using DevExtreme.MVC.Demos.Models.SampleData; using Newtonsoft.Json; using System.Collections.Generic; using System.Linq; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class TreeViewController : Controller { public ActionResult VirtualMode() { return View(); } } }

When the data source is remote, the TreeView requests data for each expanded node. To prevent this for nodes that do not nest others, set the hasItems field to false for the corresponding data objects.

This demo enables virtual mode with a remote data source and uses the hasItemsExpr property to specify a custom name for the hasItems field.

As an alternative to virtual mode, you can use a custom logic to process requested data. To do this, specify the createChildren function as shown in the Load Data on Demand demo.