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..1c14222758 --- /dev/null +++ b/knowledge-base/treelist-get-parent-item-on-insert.md @@ -0,0 +1,312 @@ +--- +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
Version2.18.0 and later
+ + +## 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 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 +@using Telerik.DataSource; + + + + + + Add Child + + Edit + Update + Cancel + + + + + + + @{ + 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(); + + } + + + + + + + +@code { + public TelerikTreeList TreeListRef { get; set; } + + public void AddItem(TreeListCommandEventArgs args) + { + var parentId = (args.Item as Employee).ParentId; + Employee itemToInsert = new Employee(); + itemToInsert.ParentId = parentId; // and/or other metadata + 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 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 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 + + Edit + Update + Cancel + + + + + + + @{ + 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; } + + void AddItem(TreeListCommandEventArgs args) + { + Employee currItem = args.Item as Employee; + var state = new TreeListState(); + var itemToInsert = new Employee(); + itemToInsert.ParentData = $"Parent: {currItem.Name}"; // and/or other metadata + state.ParentItem = currItem; + 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); + } +} +````