.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.

Load Children on Demand and Recursive CheckBox Mode

Consider the following scenarios when using the TreeView LoadChildrenOnDemand feature in a combination with the Recursive CheckBoxMode:

• When checking the checkbox element of the parent item without loading the children, this parent item is added to the CheckedItems collection (the children are not).
• When loading the children of the parent node by pressing the expand icon, and the checkbox of the parent node is checked, all child data items must be manually added to the CheckedItems collection.

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:

• XAML

<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:

• C#

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:

• C#

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.