From 63d815c84288070a04c037e42c51aa97274167d6 Mon Sep 17 00:00:00 2001 From: KB Bot Date: Mon, 21 Oct 2024 09:00:02 +0000 Subject: [PATCH 1/2] Added new kb article treelist-expand-nodes-programmatically --- .../treelist-expand-nodes-programmatically.md | 187 ++++++++++++++++++ 1 file changed, 187 insertions(+) create mode 100644 knowledge-base/treelist-expand-nodes-programmatically.md diff --git a/knowledge-base/treelist-expand-nodes-programmatically.md b/knowledge-base/treelist-expand-nodes-programmatically.md new file mode 100644 index 0000000000..300f412cce --- /dev/null +++ b/knowledge-base/treelist-expand-nodes-programmatically.md @@ -0,0 +1,187 @@ +--- +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 a specific node programmatically. + +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 node 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 +@using Telerik.DataSource; + +
+ + Expand/Collapse All Items + +
+
+ + + + + + + + + +@code { + private TelerikTreeList TreeListRef { get; set; } = new TelerikTreeList(); + + 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; + } + + 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 List Data { get; set; } + + 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; } + } + + // used in this example for data generation and retrieval for CUD operations on the current view-model data + public int LastId { get; set; } = 1; + + 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); + } +} +```` + +## See Also + +- [TreeList State Documentation]({%slug treelist-state%}) +- [TreeList Overview]({%slug treelist-overview%}) From 9a37322e379fae51c7979c5da52dd83bb15b8525 Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Tue, 29 Oct 2024 15:27:07 +0200 Subject: [PATCH 2/2] kb(TreeList): article and example polish --- .../treelist-expand-nodes-programmatically.md | 66 +++++++++---------- 1 file changed, 32 insertions(+), 34 deletions(-) diff --git a/knowledge-base/treelist-expand-nodes-programmatically.md b/knowledge-base/treelist-expand-nodes-programmatically.md index 300f412cce..0ae7d7b2bf 100644 --- a/knowledge-base/treelist-expand-nodes-programmatically.md +++ b/knowledge-base/treelist-expand-nodes-programmatically.md @@ -22,11 +22,11 @@ ticketid: 1663716, 1649445, 1548181 ## Description -In the Telerik TreeList for Blazor, I load the TreeList in a collapsed mode. I need to programmatically expand and collapse a specific node programmatically. +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 node without user interaction? +- 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 @@ -36,45 +36,34 @@ To control the expanded or collapsed state of items in the TreeList programmatic Below is an example demonstrating how to use the TreeList State to expand or collapse items programmatically: ````CSHTML -@using Telerik.DataSource; -
Expand/Collapse All Items

- + Width="850px"> - - - - + + + @code { private TelerikTreeList TreeListRef { get; set; } = new TelerikTreeList(); - - 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; - } + private List Data { get; set; } + private int LastId { get; set; } = 1; private async Task SetTreeListExpandedItems() { @@ -92,10 +81,12 @@ Below is an example demonstrating how to use the TreeList State to expand or col } } } + var expandedState = new TreeListState() { ExpandedItems = new List(toExpand) }; + await TreeListRef.SetStateAsync(expandedState); } else @@ -104,26 +95,23 @@ Below is an example demonstrating how to use the TreeList State to expand or col { ExpandedItems = new List() }; + await TreeListRef.SetStateAsync(expandedState); } } - private List Data { get; set; } - - public class Employee + private async Task OnStateInitHandler(TreeListStateEventArgs args) { - public List DirectReports { get; set; } + var collapsedItemsState = new TreeListState() + { + //collapse all items in the TreeList upon initialization of the state + ExpandedItems = new List() + }; - public int Id { get; set; } - public string Name { get; set; } - public string EmailAddress { get; set; } - public DateTime HireDate { get; set; } + args.TreeListState = collapsedItemsState; } - // used in this example for data generation and retrieval for CUD operations on the current view-model data - public int LastId { get; set; } = 1; - protected override async Task OnInitializedAsync() { Data = await GetTreeListData(); @@ -178,6 +166,16 @@ Below is an example demonstrating how to use the TreeList State to expand or col 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; } + } } ````