.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. TheLoadChildrenOnDemandevent handler receives two parameters:- The
senderargument, which is of typeobject, but can be cast to theRadTreeViewtype. - A
TreeViewLoadChildrenOnDemandEventArgsobject, which has a reference to:- the item through its
Item(object) property.
- the item through its
- The
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 typeTelerik.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.