diff --git a/knowledge-base/treelist-expand-nodes-programmatically.md b/knowledge-base/treelist-expand-nodes-programmatically.md new file mode 100644 index 0000000000..0ae7d7b2bf --- /dev/null +++ b/knowledge-base/treelist-expand-nodes-programmatically.md @@ -0,0 +1,185 @@ +--- +title: How to Programmatically Expand or Collapse TreeList Nodes +description: Learn how to programmatically expand or collapse nodes in a Telerik TreeList for Blazor by utilizing the TreeList state management. +type: how-to +page_title: How to Programmatically Expand or Collapse TreeList Nodes +slug: treelist-kb-expand-nodes-programmatically +tags: treelist, expand, collapse +res_type: kb +ticketid: 1663716, 1649445, 1548181 +--- + +## Environment + + + + + + + + +
ProductTreeList for Blazor
+ +## Description + +In the Telerik TreeList for Blazor, I load the TreeList in a collapsed mode. I need to programmatically expand and collapse TreeList nodes. + +This KB article also answers the following questions: +- How can I control the expanded state of TreeList nodes in code? +- Is it possible to expand a TreeList nodes without user interaction? +- What approach should I take to programmatically adjust the visibility of TreeList nodes? + +## Solution + +To control the expanded or collapsed state of items in the TreeList programmatically, utilize the TreeList State. The state management feature allows for the adjustment of item visibility through code. + +Below is an example demonstrating how to use the TreeList State to expand or collapse items programmatically: + +````CSHTML +
+ + Expand/Collapse All Items + +
+
+ + + + + + + + + +@code { + private TelerikTreeList TreeListRef { get; set; } = new TelerikTreeList(); + private List Data { get; set; } + private int LastId { get; set; } = 1; + + private async Task SetTreeListExpandedItems() + { + if (!(TreeListRef.GetState().ExpandedItems.Any())) + { + List toExpand = new List(); + foreach (Employee item in Data) + { + toExpand.Add(item); + if (item.DirectReports.Any()) + { + foreach (Employee child in item.DirectReports) + { + toExpand.Add(child); + } + } + } + + var expandedState = new TreeListState() + { + ExpandedItems = new List(toExpand) + }; + + await TreeListRef.SetStateAsync(expandedState); + } + else + { + var expandedState = new TreeListState() + { + ExpandedItems = new List() + }; + + await TreeListRef.SetStateAsync(expandedState); + } + + } + + private async Task OnStateInitHandler(TreeListStateEventArgs args) + { + var collapsedItemsState = new TreeListState() + { + //collapse all items in the TreeList upon initialization of the state + ExpandedItems = new List() + }; + + args.TreeListState = collapsedItemsState; + } + + protected override async Task OnInitializedAsync() + { + Data = await GetTreeListData(); + } + + private async Task> GetTreeListData() + { + List data = new List(); + + for (int i = 1; i < 15; i++) + { + Employee root = new Employee + { + Id = LastId, + Name = $"root: {i}", + EmailAddress = $"{i}@example.com", + HireDate = DateTime.Now.AddYears(-i), + DirectReports = new List(), // prepare a collection for the child items, will be populated later in the code + }; + data.Add(root); + LastId++; + + for (int j = 1; j < 4; j++) + { + int currId = LastId; + Employee firstLevelChild = new Employee + { + Id = currId, + Name = $"first level child {j} of {i}", + EmailAddress = $"{currId}@example.com", + HireDate = DateTime.Now.AddDays(-currId), + DirectReports = new List(), // collection for child nodes + }; + root.DirectReports.Add(firstLevelChild); // populate the parent's collection + LastId++; + + for (int k = 1; k < 3; k++) + { + int nestedId = LastId; + // populate the parent's collection + firstLevelChild.DirectReports.Add(new Employee + { + Id = LastId, + Name = $"second level child {k} of {j} and {i}", + EmailAddress = $"{nestedId}@example.com", + HireDate = DateTime.Now.AddMinutes(-nestedId) + }); ; + LastId++; + } + } + } + + return await Task.FromResult(data); + } + + public class Employee + { + public List DirectReports { get; set; } + + public int Id { get; set; } + public string Name { get; set; } + public string EmailAddress { get; set; } + public DateTime HireDate { get; set; } + } +} +```` + +## See Also + +- [TreeList State Documentation]({%slug treelist-state%}) +- [TreeList Overview]({%slug treelist-overview%})