DropDownTree Binding to Flat Data
This article explains how to bind the DropDownTree for Blazor to flat self-referencing data. Before continuing, make sure you are familiar with the DropDownTree data binding basics.
Flat data means that all DropDownTree items are available at one level in a single collection, for example, List<MyTreeItem>. The parent-child relationships are defined through properties in the model. For example, the ParentId property value of one item points to the Id property value of another parent item. The root level items have null values for ParentId. There must be at least one node with a null value so that the TreeView in the DropDownTree popup renders.
You must also provide the correct value for the HasChildren property of each item, so that expand arrows display where needed.
When using multiple level bindings, define the same ParentIdField for all levels for better performance.
Bind DropDownTree to flat data
<TelerikDropDownTree Data="@DropDownTreeData"
@bind-Value="@DropDownTreeValue"
@bind-ExpandedItems="@DropDownTreeExpandedItems"
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>();
protected override void OnInitialized()
{
DropDownTreeData = LoadFlatData();
DropDownTreeExpandedItems = DropDownTreeData.Where(x => x.ParentId is null && x.HasChildren);
}
private int TreeLevels { get; set; } = 3;
private int RootItems { get; set; } = 2;
private int ItemsPerLevel { get; set; } = 2;
private int IdCounter { get; set; }
private List<TreeItem> LoadFlatData()
{
List<TreeItem> items = new List<TreeItem>();
PopulateChildren(items, null, 1);
return items;
}
private void PopulateChildren(List<TreeItem> items, int? parentId, int level)
{
var itemCount = level == 1 ? RootItems : ItemsPerLevel;
for (int i = 1; i <= itemCount; i++)
{
var itemId = ++IdCounter;
items.Add(new TreeItem()
{
Id = itemId,
ParentId = parentId,
HasChildren = level < TreeLevels,
Text = $"Level {level} Item {i} Id {itemId}",
Value = itemId
});
if (level < TreeLevels)
{
PopulateChildren(items, itemId, level + 1);
}
}
}
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; }
}
}