.NET MAUI TreeView Load Children on Demand

The Load Children on Demand feature optimizes the performance of the Telerik UI for .NET MAUI TreeView control when operating with a huge amount of items. This mechanism lets the nodes load their child nodes as the user expands the parent by clicking on the expand icon for desktop and tapping on the item on mobile.

To enable the TreeView Load Children on Demand feature:

1. Set the IsLoadChildrenOnDemandEnabled (bool) property. The property specifies a value indicating whether load on demand is enabled.

2. Use the LoadChildrenOnDemand event or LoadChildrenOnDemandCommand command to load the items.

Event

The TreeView exposes the following event for loading children on demand.

• LoadChildrenOnDemand—Raised when loading an item on demand. The LoadChildrenOnDemand event handler receives two parameters:
  • The sender argument, which is of type object, but can be cast to the RadTreeView type.
  • A TreeViewLoadChildrenOnDemandEventArgs object, which has a reference to:
    • the item through its Item(object) property.

Command

The TreeView exposes the following command for loading children on demand.

• LoadChildrenOnDemandCommand—Specifies a command to execute when loading an item on demand. The command accepts a parameter of type Telerik.Maui.Controls.TreeView.TreeViewLoadChildrenOnDemandCommandContext.

The next example shows how to use the Load Children on Demand command in the TreeView.

1. Define the TreeView control:

<telerik:RadTreeView x:Name="treeView" 
                     ItemsSource="{Binding Items}" 
                     IsLoadChildrenOnDemandEnabled="True"
                     LoadChildrenOnDemandCommand="{Binding LoadChildrenOnDemand}">
    <telerik:TreeViewDescriptor DisplayMemberPath="Name"
                                ItemsSourcePath="Children"
                                TargetType="{x:Type local:Category}"/>
    <telerik:TreeViewDescriptor TargetType="{x:Type x:String}" />
    <telerik:RadTreeView.BindingContext>
        <local:LoadingViewModel/>
    </telerik:RadTreeView.BindingContext>
</telerik:RadTreeView>

2. Add a sample data model:

public class Category : NotifyPropertyChangedBase
{
    public string Name { get; set; }

    ObservableCollection<string> children;
    public ObservableCollection<string> Children
    {
        get
        {
            return this.children;
        }
        set
        {
            if (this.children != value)
            {
                this.children = value;
                this.OnPropertyChanged();
            }
        }
    }
}

3. Define the ViewModel with the LoadChildrenOnDemandCommand implementation:

public class LoadingViewModel : NotifyPropertyChangedBase
{
    private const int loadDelay = 1000;
    public LoadingViewModel()
    {
        this.Items = new ObservableCollection<Category>()
        {
            new Category { Name = "Products"},
            new Category { Name = "Purchase"},
            new Category { Name = "Support"},
            new Category { Name = "Community"}
        };

        this.LoadChildrenOnDemand = new Command<TreeViewLoadChildrenOnDemandCommandContext>(this.LoadOnDemandExecute);
    }

    public ObservableCollection<Category> Items { get; set; }
    public ICommand LoadChildrenOnDemand { get; set; }

    private async void LoadOnDemandExecute(TreeViewLoadChildrenOnDemandCommandContext commandContext)
    {
        if (commandContext.Item is Category category)
        {
            await Task.Delay(loadDelay);

            ObservableCollection<string> children = await Task.Run(() => this.LoadChildren(category));
            category.Children = children;
        }
        commandContext.Finish();

    }
    private ObservableCollection<string> LoadChildren(Category category)
    {
        Dictionary<string, ObservableCollection<string>> allItems = new Dictionary<string, ObservableCollection<string>>();
        allItems.Add("Products", new ObservableCollection<string>() { "Telerik UI for .NET MAUI", "Telerik UI for WPF", "Telerik Reporting", "Telerik UI for Xamarin", "Telerik UI for WinUI" });
        allItems.Add("Purchase", new ObservableCollection<string>() { "Buy now", "License Agreement", "Policies" });
        allItems.Add("Support", new ObservableCollection<string>() { "Support Center", "Knowledge Base", "Demos", "Tutorials" });
        allItems.Add("Community", new ObservableCollection<string>() { "Learning Resources", "Blogs", "Forums" });

        var result = new ObservableCollection<string>();
        bool hasChildren = allItems.TryGetValue(category.Name, out result);

        return result;
    }
}

For runnable examples demonstrating the TreeView Load Children on Demand command, see the SDKBrowser Demo Application and go to TreeView > Load Children on Demand.

See Also

• CheckBoxes in TreeView
• Styling the TreeView Item
• Scrolling options
• Multiple and Single Selection
• Events
• Available Commands in .NET MAUI TreeView