New to Telerik UI for Blazor? Start a free 30-day trial
TreeView Expanded Items
Updated over 6 months ago
TreeView lets the user expand multiple items. It also gives the option to pre-expand a specific item.
To use the item expansion, set the ExpandedItems parameter. It allows two-way binding (@bind-ExpandedItems) and one-way binding + ExpandedItemsChanged event.
The ExpandedItems collection is of type IEnumerable<object>.
Programmatically Expand and Collapse Items
Programmatically expand and collapse items on button click.
@*To expand a specific node, the parent of this node needs to be expanded as well.*@ <p> <label>Item Id: <TelerikNumericTextBox @bind-Value="@ItemToExpand" Width="80px" /></label> <TelerikButton OnClick="@ExpandItem">Expand Item @ItemToExpand</TelerikButton> </p> <p> <TelerikButton OnClick="@ExpandRoot">Expand Root Items</TelerikButton> <TelerikButton OnClick="@ExpandAll">Expand All</TelerikButton> <TelerikButton OnClick="@CollapseAll">Collapse All</TelerikButton> </p> <TelerikTreeView Data="@FlatData" @bind-ExpandedItems="@ExpandedItems" @bind-SelectedItems="@SelectedItems" SelectionMode="@TreeViewSelectionMode.Single" /> @code { public IEnumerable<TreeItem> FlatData { get; set; } public IEnumerable<object> ExpandedItems { get; set; } = new List<TreeItem>(); public IEnumerable<object> SelectedItems { get; set; } = new List<TreeItem>(); int? ItemToExpand { get; set; } Random rnd { get; set; } = new Random(); void ExpandItem() { var allItemsToExpand = new List<TreeItem>(); var leafItem = FlatData.Where(x => x.Id == ItemToExpand).FirstOrDefault(); int? parentId = null; if (leafItem != null) { // item selection is not required for expanding SelectedItems = new List<TreeItem>() { leafItem }; allItemsToExpand.Add(leafItem); parentId = leafItem.ParentId; while (parentId != null) { var parentItem = FlatData.Where(x => x.Id == parentId).FirstOrDefault(); allItemsToExpand.Add(parentItem); parentId = parentItem.ParentId; } } ExpandedItems = allItemsToExpand; } void ExpandRoot() { ExpandedItems = FlatData.Where(x => x.ParentId == null && x.HasChildren == true); } void ExpandAll() { ExpandedItems = FlatData.Where(x => x.HasChildren == true); } void CollapseAll() { ExpandedItems = new List<TreeItem>(); SelectedItems = new List<TreeItem>(); } protected override void OnInitialized() { FlatData = LoadFlat(); ItemToExpand = rnd.Next(1, FlatData.Count() + 1); } int TreeLevels { get; set; } = 3; int ItemsPerLevel { get; set; } = 3; int IdCounter { get; set; } = 1; List<TreeItem> LoadFlat() { List<TreeItem> items = new List<TreeItem>(); PopulateTreeItems(items, null, 1); return items; } void PopulateTreeItems(List<TreeItem> items, int? parentId, int level) { for (int i = 1; i <= ItemsPerLevel; i++) { var itemId = IdCounter++; items.Add(new TreeItem() { Id = itemId, Text = $"Level {level} Item {i} Id {itemId}", ParentId = parentId, HasChildren = level < TreeLevels }); if (level < TreeLevels) { PopulateTreeItems(items, itemId, level + 1); } } } public class TreeItem { public int Id { get; set; } public string Text { get; set; } public int? ParentId { get; set; } public bool HasChildren { get; set; } } }