DxTreeView.LoadChildNodesOnDemand Property

Specifies whether TreeView child nodes are loaded on demand.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(false)]
[Parameter]
public bool LoadChildNodesOnDemand { get; set; }

Property Value

Type	Default	Description
Boolean	false	true to load child nodes on demand; otherwise, false.

Remarks

When you enable Load Child Nodes on Demand mode (set the LoadChildNodesOnDemand property to true), the TreeView loads a node’s children when the node is expanded for the first time. This mode improves the TreeView’s performance for tree structures with a large number of nodes.

You can load child nodes on demand in either bound or unbound mode. Note that bound mode works with hierarchical structures only and requires the HasChildren property. The component uses this property to determine how to render nodes before they are expanded for the first time (for example, whether expand buttons should appear).

Razor

<DxTreeView @ref="@treeView"
            CssClass="cw-480"
            Data="@DataSource"
            LoadChildNodesOnDemand="true"
            @* ... *@
            AnimationType="LayoutAnimationType.Slide">
    <DataMappings>
        <DxTreeViewDataMapping HasChildren="@(nameof(DateTimeGroup.HasSubGroups))"
                               Children="@(nameof(DateTimeGroup.SubGroups))"
                               Text="@(nameof(DateTimeGroup.Title))"/>
    </DataMappings>
</DxTreeView>

@code {
    DxTreeView treeView;

    IEnumerable<DateTimeGroup> DataSource = new List<DateTimeGroup>() {
        new DateTimeGroup(new DateTime(DateTime.Now.Year, 1, 1), DateTimeGroupType.Year)
    };

    protected override void OnAfterRender(bool firstRender) {
        if(firstRender) {
            var todayDate = DateTime.Now;
            treeView.SetNodeExpanded(n => n.Text == todayDate.Year.ToString(), true);
        }
        base.OnAfterRender(firstRender);
    }
}

DateTimeGroup.cs

using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;

namespace BlazorDemo.Data {
    public enum DateTimeGroupType { Year, Month, Week, Day }

    public class DateTimeGroup {
        public DateTimeGroup(DateTime dateTime, DateTimeGroupType groupType) {
            DateTime = dateTime;
            GroupType = groupType;
        }

        public DateTime DateTime { get; private set; }
        public DateTimeGroupType GroupType { get; private set; }
        public string Title {
            get {
                switch(GroupType) {
                    case DateTimeGroupType.Year:
                        return DateTime.ToString("yyyy");
                    case DateTimeGroupType.Month:
                        return DateTime.ToString("MMMM");
                    case DateTimeGroupType.Week:
                        var culture = CultureInfo.CurrentCulture;
                        var weekNumber = culture.Calendar.GetWeekOfYear(DateTime,
                            culture.DateTimeFormat.CalendarWeekRule,
                            culture.DateTimeFormat.FirstDayOfWeek);
                        var weekStartDate = DateTimeUtils.GetWeekStart(DateTime);
                        var weekEndDate = weekStartDate.AddDays(6);
                        var formatString = weekStartDate.Year == weekEndDate.Year ? "MMMM d" : "MMMM d, yyyy";
                        return String.Format("Week {0} ({1} - {2})", weekNumber,
                            weekStartDate.ToString(formatString), weekEndDate.ToString(formatString));
                    case DateTimeGroupType.Day:
                        return DateTime.ToString("dddd, MMMM d");
                    default:
                        return "";
                }
            }
        }
        public bool HasSubGroups => GroupType < DateTimeGroupType.Day;
        IEnumerable<DateTimeGroup> subGroups;
        public IEnumerable<DateTimeGroup> SubGroups => subGroups ??= GetSubGroups();
        public IEnumerable<DateTimeGroup> GetSubGroups() {
            switch(GroupType) {
                case DateTimeGroupType.Year:
                    return Enumerable.Range(1, 12)
                        .Select(m => new DateTimeGroup(new DateTime(DateTime.Year, m, 1), DateTimeGroupType.Month))
                        .ToList();
                case DateTimeGroupType.Month:
                    var firstDayOfMonth = DateTime;
                    var weekOffset = firstDayOfMonth.Month > 1 ? firstDayOfMonth.DayOfWeek - CultureInfo.CurrentCulture.DateTimeFormat.FirstDayOfWeek : 0;
                    var day = firstDayOfMonth.AddDays(-weekOffset);
                    var nextMonthFirstDay = DateTime.AddMonths(1);
                    var monthWeeks = new List<DateTimeGroup>();
                    while(day < nextMonthFirstDay) {
                        monthWeeks.Add(new DateTimeGroup(day.Month == firstDayOfMonth.Month ? day : firstDayOfMonth, DateTimeGroupType.Week));
                        for(int i = 0; i < 7; i++)
                            day = day.AddDays(1);
                    }
                    return monthWeeks;
                case DateTimeGroupType.Week:
                    var firstDayOfWeek = DateTimeUtils.GetWeekStart(DateTime);
                    var dayOfWeek = firstDayOfWeek;
                    var weekDays = new List<DateTimeGroup>();
                    for(int i = 0; i < 7; i++) {
                        if(dayOfWeek.Year == DateTime.Year && dayOfWeek.Month == DateTime.Month)
                            weekDays.Add(new DateTimeGroup(dayOfWeek, DateTimeGroupType.Day));
                        dayOfWeek = dayOfWeek.AddDays(1);
                    }
                    return weekDays;
                default:
                    return null;
            }
        }
    }
}

Run Demo: TreeView - Load Child Nodes on Demand Mode

View Example: TreeView for Blazor - How to load child nodes on demand (lazy loading)

Load Child Nodes on Demand Mode and Node Selection

If the AllowSelectNodes property is set to true and a user navigates to a URL associated with a TreeView node, the component select this node. If the LoadChildNodesOnDemand property is true, the component applies proper selection only if a user has already loaded that node (expanded all its parent nodes).

The code below demonstrates a TreeView with the enabled LoadChildNodesOnDemand property. When a user opens the https://localhost:44348/sortdata URL, the Sort Data node is not selected.

<DxTreeView CssClass="app-sidebar" AllowSelectNodes="true" LoadChildNodesOnDemand="true">
    <Nodes>
        <DxTreeViewNode Text="Grid">
            <Nodes>
                <DxTreeViewNode NavigateUrl="sortdata" Text="Sort Data"></DxTreeViewNode>
                <DxTreeViewNode NavigateUrl="groupdata" Text="Group Data"></DxTreeViewNode>
            </Nodes>
        </DxTreeViewNode>
        <DxTreeViewNode Text="Scheduler">
            <Nodes>
                <DxTreeViewNode NavigateUrl="viewtypes" Text="View Types"></DxTreeViewNode>
                <DxTreeViewNode NavigateUrl="resources" Text="Resources"></DxTreeViewNode>
            </Nodes>
        </DxTreeViewNode>
    </Nodes>
</DxTreeView>

The image below shows selection with the disabled LoadChildNodesOnDemand mode:

You can also use the DxTreeView.UrlMatchMode and DxTreeViewNode.UrlMatchMode properties to specify how the TreeView component matches the browser URL and node’s NavigateUrl property.

Limitations

This mode has the following limitations:

• You cannot operate with unloaded nodes in code (for instance, select an unloaded node, get node information, and so on).
• The component loads all nodes into memory if you start a filter operation.
• In bound mode, the component loads child nodes of a checked node into memory if you apply recursive checking.
• If you apply recursive checking in unbound mode, TreeView cannot load all nodes into memory. In this case, the component does not check unloaded nodes.