From 9f780d46fd47599ae7a7da03eb2bb021b3fdba20 Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov Date: Tue, 20 Oct 2020 17:48:48 +0300 Subject: [PATCH 1/2] feat(kb): get parent item on insert for the treelist --- .../treelist-get-parent-item-on-insert.md | 292 ++++++++++++++++++ 1 file changed, 292 insertions(+) create mode 100644 knowledge-base/treelist-get-parent-item-on-insert.md diff --git a/knowledge-base/treelist-get-parent-item-on-insert.md b/knowledge-base/treelist-get-parent-item-on-insert.md new file mode 100644 index 0000000000..3c1c1556de --- /dev/null +++ b/knowledge-base/treelist-get-parent-item-on-insert.md @@ -0,0 +1,292 @@ +--- +title: Get the parent item when inserting a child to the TreeList +description: How to get the parent item when inserting a child to the TreeList +type: how-to +page_title: Get the parent item when inserting a child to the TreeList +slug: treelist-kb-get-parent-item-on-insert +position: +tags: +ticketid: 1490309 +res_type: kb +--- + +## Environment + + + + + + + +
ProductTreeList for Blazor
+ + +## Description + +When inserting a child item in the TreeList I would like to be able to get the information for the parent it belongs to and show it to the user. + +## Solution + +The approaches to handle this would depend of the type of data the component is bound to - [Flat]({%slug treelist-data-binding-flat-data%}) or [Hierarchical]({%slug treelist-data-binding-hierarchical-data%}). The examples below showcase how to handle both scenarios: + +* [Get the Parent Item When Inserting a Child to the TreeList When Bound To Flat Data](#get-the-parent-item-when-inserting-a-child-to-the-treelist-when-bound-to-flat-data) + +* [Get the Parent Item When Inserting a Child to the TreeList When Bound To Hierarchical Data](#get-the-parent-item-when-inserting-a-child-to-the-treelist-when-bound-to-hierarchical-data) + +### Get the Parent Item When Inserting a Child to the TreeList When Bound To Flat Data + +#### Step by step Explanations + +1. Create a custom `Add` command in the `TreeListCommandColumn`. +1. Pass the `TreeListCommandEventsArgs` object to the handler. +1. Use the [TreeList state]({%slug treelist-state%}) and its `InsertedItem` field. + + +````CSHTML +@using Telerik.DataSource; + + + + + Add Child + Edit + Update + Cancel + + + + + + + @{ + CurrentlyEditedEmployee = context as Employee; + Employee parent = Data.Where(x => x.Id == CurrentlyEditedEmployee.ParentId).FirstOrDefault(); + + } + + + + + + + +@code { + public TelerikTreeList TreeListRef { get; set; } = new TelerikTreeList(); + + public void AddItem(TreeListCommandEventArgs args) + { + var parentId = (args.Item as Employee).ParentId; + Employee itemToInsert = new Employee(); + itemToInsert.ParentId = parentId; + var state = new TreeListState(); + state.InsertedItem = itemToInsert; + + TreeListRef?.SetState(state); + } + + public List Data { get; set; } + public Employee CurrentlyEditedEmployee { get; set; } + + protected override async Task OnInitializedAsync() + { + Data = await GetTreeListData(); + } + + // sample model + + public class Employee + { + // denote the parent-child relationship between items + public int Id { get; set; } + public int? ParentId { get; set; } + + // custom data fields for display + public string Name { get; set; } + public string EmailAddress { get; set; } + public DateTime HireDate { get; set; } + } + + // data generation + + async Task> GetTreeListData() + { + List data = new List(); + + for (int i = 1; i < 15; i++) + { + data.Add(new Employee + { + Id = i, + ParentId = null, // indicates a root-level item + Name = $"root: {i}", + EmailAddress = $"{i}@example.com", + HireDate = DateTime.Now.AddYears(-i) + }); ; + + for (int j = 1; j < 4; j++) + { + int currId = i * 100 + j; + data.Add(new Employee + { + Id = currId, + ParentId = i, + Name = $"first level child {j} of {i}", + EmailAddress = $"{currId}@example.com", + HireDate = DateTime.Now.AddDays(-currId) + }); + + for (int k = 1; k < 3; k++) + { + int nestedId = currId * 1000 + k; + data.Add(new Employee + { + Id = nestedId, + ParentId = currId, + Name = $"second level child {k} of {i} and {currId}", + EmailAddress = $"{nestedId}@example.com", + HireDate = DateTime.Now.AddMinutes(-nestedId) + }); ; + } + } + } + + return await Task.FromResult(data); + } +} +```` + +### Get the Parent Item When Inserting a Child to the TreeList When Bound To Hierarchical Data + +#### Step by step Explanations + +1. Create a custom `Add` command in the `TreeListCommandColumn`. +1. Pass the `TreeListCommandEventsArgs` object to the handler. +1. Set the `ParentItem` field of the [TreeList state]({%slug treelist-state%}) to the item received from the `TreeListCommandEventsArgs`. +1. Use the TreeList state and its `InsertedItem` field. + + +````CSHTML + + + + Add Child + Edit + Update + Cancel + + + + + + + + + +@code { + TelerikTreeList TreeListRef { get; set; } = new TelerikTreeList(); + + void AddItem(TreeListCommandEventArgs args) + { + var state = new TreeListState(); + var itemToInsert = new Employee(); + itemToInsert.ParentData = $"Parent: {(args.Item as Employee).Name}"; + state.ParentItem = args.Item as Employee; + state.InsertedItem = itemToInsert; + + TreeListRef?.SetState(state); + } + + public List Data { get; set; } + + // sample model + + public class Employee + { + // hierarchical data collections + public List DirectReports { get; set; } + + public string ParentData { get; set; } + + // data fields for display + public int Id { get; set; } + public string Name { get; set; } + public string EmailAddress { get; set; } + public DateTime HireDate { get; set; } + } + + // data generation + + // 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(); + } + + 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); + } +} +```` \ No newline at end of file From fceec9d9cf87441eee81c634c680dd843f691cf0 Mon Sep 17 00:00:00 2001 From: Marin Bratanov Date: Tue, 20 Oct 2020 18:57:19 +0300 Subject: [PATCH 2/2] chore(kb): treelist get parent on insert improvements --- .../treelist-get-parent-item-on-insert.md | 52 +++++++++++++------ 1 file changed, 36 insertions(+), 16 deletions(-) diff --git a/knowledge-base/treelist-get-parent-item-on-insert.md b/knowledge-base/treelist-get-parent-item-on-insert.md index 3c1c1556de..1c14222758 100644 --- a/knowledge-base/treelist-get-parent-item-on-insert.md +++ b/knowledge-base/treelist-get-parent-item-on-insert.md @@ -17,6 +17,10 @@ res_type: kb Product TreeList for Blazor + + Version + 2.18.0 and later + @@ -37,9 +41,9 @@ The approaches to handle this would depend of the type of data the component is #### Step by step Explanations -1. Create a custom `Add` command in the `TreeListCommandColumn`. -1. Pass the `TreeListCommandEventsArgs` object to the handler. -1. Use the [TreeList state]({%slug treelist-state%}) and its `InsertedItem` field. +1. Create a [custom command]({%slug treelist-columns-command%}) to initiate inserting in the `TreeListCommandColumn`. +1. Pass the `TreeListCommandEventsArgs` object to the `OnClick` handler. +1. Use the [TreeList state]({%slug treelist-state%}) and its `InsertedItem` field to populate the desired information from the current item that you have in the event arguments. ````CSHTML @@ -57,7 +61,9 @@ The approaches to handle this would depend of the type of data the component is Add Child + Icon="@IconName.Plus"> + Add Child + Edit Update Cancel @@ -69,6 +75,7 @@ The approaches to handle this would depend of the type of data the component is @{ CurrentlyEditedEmployee = context as Employee; + // One way to get the parent item from the Data based on the ID we provide, you can change as necessary Employee parent = Data.Where(x => x.Id == CurrentlyEditedEmployee.ParentId).FirstOrDefault(); } @@ -80,16 +87,15 @@ The approaches to handle this would depend of the type of data the component is @code { - public TelerikTreeList TreeListRef { get; set; } = new TelerikTreeList(); + public TelerikTreeList TreeListRef { get; set; } public void AddItem(TreeListCommandEventArgs args) { var parentId = (args.Item as Employee).ParentId; Employee itemToInsert = new Employee(); - itemToInsert.ParentId = parentId; + itemToInsert.ParentId = parentId; // and/or other metadata var state = new TreeListState(); state.InsertedItem = itemToInsert; - TreeListRef?.SetState(state); } @@ -168,14 +174,17 @@ The approaches to handle this would depend of the type of data the component is #### Step by step Explanations -1. Create a custom `Add` command in the `TreeListCommandColumn`. -1. Pass the `TreeListCommandEventsArgs` object to the handler. +1. Create a [custom command]({%slug treelist-columns-command%}) to initiate inserting in the `TreeListCommandColumn`. +1. Pass the `TreeListCommandEventsArgs` object to the `OnClick` handler. 1. Set the `ParentItem` field of the [TreeList state]({%slug treelist-state%}) to the item received from the `TreeListCommandEventsArgs`. -1. Use the TreeList state and its `InsertedItem` field. +1. Use the TreeList state and its `InsertedItem` field to populate the desired information from the current item that you have in the event arguments.. ````CSHTML +@* One way to get metadata in the current item about its parent upon insertion *@ + Add Child + Icon="@IconName.Plus"> + Add Child + Edit Update Cancel @@ -192,22 +203,31 @@ The approaches to handle this would depend of the type of data the component is + + + @{ + var parent = context as Employee; + // One way to get the parent item from the Data based on the ID we provide, you can change as necessary + + } change as necessary + + @code { - TelerikTreeList TreeListRef { get; set; } = new TelerikTreeList(); + TelerikTreeList TreeListRef { get; set; } void AddItem(TreeListCommandEventArgs args) { + Employee currItem = args.Item as Employee; var state = new TreeListState(); var itemToInsert = new Employee(); - itemToInsert.ParentData = $"Parent: {(args.Item as Employee).Name}"; - state.ParentItem = args.Item as Employee; + itemToInsert.ParentData = $"Parent: {currItem.Name}"; // and/or other metadata + state.ParentItem = currItem; state.InsertedItem = itemToInsert; - TreeListRef?.SetState(state); } @@ -289,4 +309,4 @@ The approaches to handle this would depend of the type of data the component is return await Task.FromResult(data); } } -```` \ No newline at end of file +````