New to Telerik UI for Blazor? Start a free 30-day trial
DropDownTree Load on Demand
Updated on Feb 10, 2026
This article explains how to load flat and hierarchical data on demand in the DropDownTree for Blazor. Before continuing, make sure you are familiar with the DropDownTree data binding basics.
You can bind the DropDownTree to just one or two levels on initial display for efficiency. To show an expand icon for parent items and enable loading of children on demand, set the HasChildren property of the parent item to true. Then, use the OnExpand event to load the child items of the expanded node. Loading data on demand can improve the performance of your application by requesting less data at any given time.
Flat Data
Load DropDownTree items on demand with flat data
<TelerikDropDownTree Data="@DropDownTreeData"
@bind-Value="@DropDownTreeValue"
@bind-ExpandedItems="@DropDownTreeExpandedItems"
OnExpand="@OnDropDownTreeExpand"
Width="300px">
</TelerikDropDownTree>
@code {
private List<TreeItem> DropDownTreeData { get; set; } = new();
private int DropDownTreeValue { get; set; }
private IEnumerable<object> DropDownTreeExpandedItems { get; set; } = new List<TreeItem>();
private int IdCounter { get; set; }
private async Task OnDropDownTreeExpand(DropDownTreeExpandEventArgs args)
{
TreeItem expandedItem = (TreeItem)args.Item;
if (args.Expanded && DropDownTreeData.Where(x => x.ParentId == expandedItem.Id).Count() == 0)
{
await LoadChildren(expandedItem);
}
}
private async Task LoadChildren(TreeItem item)
{
// Simulate async operation.
await Task.Delay(500);
for (int i = 1; i <= 2; i++)
{
DropDownTreeData.Add(new TreeItem()
{
Id = ++IdCounter,
ParentId = item.Id,
Text = $"Tree Item {IdCounter}",
HasChildren = true
});
}
}
protected override void OnInitialized()
{
for (int i = 1; i <= 3; i++)
{
DropDownTreeData.Add(new TreeItem()
{
Id = ++IdCounter,
Text = $"Tree Item {IdCounter}",
HasChildren = true
});
}
}
public class TreeItem
{
public int Id { get; set; }
public int? ParentId { get; set; }
public bool HasChildren { get; set; }
public string Text { get; set; } = string.Empty;
public int Value { get; set; }
}
}Hierarchical Data
Load DropDownTree items on demand with hierarchical data
<TelerikDropDownTree Data="@DropDownTreeData"
@bind-Value="@DropDownTreeValue"
@bind-ExpandedItems="@DropDownTreeExpandedItems"
OnExpand="@OnDropDownTreeExpand"
Width="300px">
</TelerikDropDownTree>
@code {
private List<TreeItem> DropDownTreeData { get; set; } = new();
private int DropDownTreeValue { get; set; } = 3;
private IEnumerable<object> DropDownTreeExpandedItems { get; set; } = new List<TreeItem>();
private int IdCounter { get; set; }
private async Task OnDropDownTreeExpand(DropDownTreeExpandEventArgs args)
{
TreeItem expandedItem = (TreeItem)args.Item;
if (args.Expanded && expandedItem.Items is null)
{
await LoadChildren(expandedItem);
}
}
private async Task LoadChildren(TreeItem item)
{
// Simulate async operation.
await Task.Delay(500);
item.Items = new List<TreeItem>();
for (int i = 1; i <= 2; i++)
{
item.Items.Add(new TreeItem()
{
Id = ++IdCounter,
HasChildren = true,
Text = $"Tree Item {IdCounter}",
Value = IdCounter
});
}
}
protected override void OnInitialized()
{
for (int i = 1; i <= 3; i++)
{
DropDownTreeData.Add(new TreeItem()
{
Id = ++IdCounter,
HasChildren = true,
Text = $"Tree Item {IdCounter}",
Value = IdCounter
});
}
}
public class TreeItem
{
public int Id { get; set; }
public List<TreeItem>? Items { get; set; }
public bool HasChildren { get; set; }
public string Text { get; set; } = string.Empty;
public int Value { get; set; }
}
}