Skip to content

Commit 39e6e4e

Browse files
svdimitrmarin-bratanov
svdimitr
and
marin-bratanov
authored
KB article on how to get the parent item for the TreeList when inserting a child. (#155)
* feat(kb): get parent item on insert for the treelist * chore(kb): treelist get parent on insert improvements Co-authored-by: Marin Bratanov <m.bratanov@gmail.com>
1 parent 2a0d766 commit 39e6e4e

File tree

1 file changed

+312
-0
lines changed

1 file changed

+312
-0
lines changed

‎knowledge-base/treelist-get-parent-item-on-insert.md

Lines changed: 312 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,312 @@
1+
---
2+
title: Get the parent item when inserting a child to the TreeList
3+
description: How to get the parent item when inserting a child to the TreeList
4+
type: how-to
5+
page_title: Get the parent item when inserting a child to the TreeList
6+
slug: treelist-kb-get-parent-item-on-insert
7+
position:
8+
tags:
9+
ticketid: 1490309
10+
res_type: kb
11+
---
12+
13+
## Environment
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>TreeList for Blazor</td>
19+
</tr>
20+
<tr>
21+
<td>Version</td>
22+
<td>2.18.0 and later</td>
23+
</tr>
24+
</tbody>
25+
</table>
26+
27+
28+
## Description
29+
30+
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.
31+
32+
## Solution
33+
34+
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:
35+
36+
* [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)
37+
38+
* [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)
39+
40+
### Get the Parent Item When Inserting a Child to the TreeList When Bound To Flat Data
41+
42+
#### Step by step Explanations
43+
44+
1. Create a [custom command]({%slug treelist-columns-command%}) to initiate inserting in the `TreeListCommandColumn`.
45+
1. Pass the `TreeListCommandEventsArgs` object to the `OnClick` handler.
46+
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.
47+
48+
49+
````CSHTML
50+
@using Telerik.DataSource;
51+
52+
<TelerikTreeList Data="@Data"
53+
EditMode="@TreeListEditMode.Popup"
54+
IdField="Id"
55+
ParentIdField="ParentId"
56+
Pageable="true"
57+
Width="850px"
58+
Height="400px"
59+
@ref="@TreeListRef">
60+
<TreeListColumns>
61+
<TreeListCommandColumn Width="100px">
62+
<TreeListCommandButton Command="MyAdd"
63+
OnClick="@( (TreeListCommandEventArgs args) => AddItem(args) )"
64+
Icon="@IconName.Plus">
65+
Add Child
66+
</TreeListCommandButton>
67+
<TreeListCommandButton Command="Edit" Icon="@IconName.Edit">Edit</TreeListCommandButton>
68+
<TreeListCommandButton Command="Save" Icon="@IconName.Save" ShowInEdit="true">Update</TreeListCommandButton>
69+
<TreeListCommandButton Command="Cancel" Icon="@IconName.Cancel" ShowInEdit="true">Cancel</TreeListCommandButton>
70+
</TreeListCommandColumn>
71+
72+
<TreeListColumn Field="Name" Expandable="true" Width="320px" />
73+
<TreeListColumn Field="Id" Width="120px" />
74+
<TreeListColumn Field="ParentId" Width="120px">
75+
<EditorTemplate>
76+
@{
77+
CurrentlyEditedEmployee = context as Employee;
78+
// One way to get the parent item from the Data based on the ID we provide, you can change as necessary
79+
Employee parent = Data.Where(x => x.Id == CurrentlyEditedEmployee.ParentId).FirstOrDefault();
80+
<label>@parent.Name</label>
81+
}
82+
</EditorTemplate>
83+
</TreeListColumn>
84+
<TreeListColumn Field="EmailAddress" Width="120px" />
85+
<TreeListColumn Field="HireDate" Width="220px" />
86+
</TreeListColumns>
87+
</TelerikTreeList>
88+
89+
@code {
90+
public TelerikTreeList<Employee> TreeListRef { get; set; }
91+
92+
public void AddItem(TreeListCommandEventArgs args)
93+
{
94+
var parentId = (args.Item as Employee).ParentId;
95+
Employee itemToInsert = new Employee();
96+
itemToInsert.ParentId = parentId; // and/or other metadata
97+
var state = new TreeListState<Employee>();
98+
state.InsertedItem = itemToInsert;
99+
TreeListRef?.SetState(state);
100+
}
101+
102+
public List<Employee> Data { get; set; }
103+
public Employee CurrentlyEditedEmployee { get; set; }
104+
105+
protected override async Task OnInitializedAsync()
106+
{
107+
Data = await GetTreeListData();
108+
}
109+
110+
// sample model
111+
112+
public class Employee
113+
{
114+
// denote the parent-child relationship between items
115+
public int Id { get; set; }
116+
public int? ParentId { get; set; }
117+
118+
// custom data fields for display
119+
public string Name { get; set; }
120+
public string EmailAddress { get; set; }
121+
public DateTime HireDate { get; set; }
122+
}
123+
124+
// data generation
125+
126+
async Task<List<Employee>> GetTreeListData()
127+
{
128+
List<Employee> data = new List<Employee>();
129+
130+
for (int i = 1; i < 15; i++)
131+
{
132+
data.Add(new Employee
133+
{
134+
Id = i,
135+
ParentId = null, // indicates a root-level item
136+
Name = $"root: {i}",
137+
EmailAddress = $"{i}@example.com",
138+
HireDate = DateTime.Now.AddYears(-i)
139+
}); ;
140+
141+
for (int j = 1; j < 4; j++)
142+
{
143+
int currId = i * 100 + j;
144+
data.Add(new Employee
145+
{
146+
Id = currId,
147+
ParentId = i,
148+
Name = $"first level child {j} of {i}",
149+
EmailAddress = $"{currId}@example.com",
150+
HireDate = DateTime.Now.AddDays(-currId)
151+
});
152+
153+
for (int k = 1; k < 3; k++)
154+
{
155+
int nestedId = currId * 1000 + k;
156+
data.Add(new Employee
157+
{
158+
Id = nestedId,
159+
ParentId = currId,
160+
Name = $"second level child {k} of {i} and {currId}",
161+
EmailAddress = $"{nestedId}@example.com",
162+
HireDate = DateTime.Now.AddMinutes(-nestedId)
163+
}); ;
164+
}
165+
}
166+
}
167+
168+
return await Task.FromResult(data);
169+
}
170+
}
171+
````
172+
173+
### Get the Parent Item When Inserting a Child to the TreeList When Bound To Hierarchical Data
174+
175+
#### Step by step Explanations
176+
177+
1. Create a [custom command]({%slug treelist-columns-command%}) to initiate inserting in the `TreeListCommandColumn`.
178+
1. Pass the `TreeListCommandEventsArgs` object to the `OnClick` handler.
179+
1. Set the `ParentItem` field of the [TreeList state]({%slug treelist-state%}) to the item received from the `TreeListCommandEventsArgs`.
180+
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..
181+
182+
183+
````CSHTML
184+
@* One way to get metadata in the current item about its parent upon insertion *@
185+
186+
<TelerikTreeList Data="@Data"
187+
EditMode="@TreeListEditMode.Popup"
188+
ItemsField="@(nameof(Employee.DirectReports))"
189+
Pageable="true"
190+
Width="850px"
191+
@ref="@TreeListRef">
192+
<TreeListColumns>
193+
<TreeListCommandColumn Width="100px">
194+
<TreeListCommandButton Command="MyAdd"
195+
OnClick="@( (TreeListCommandEventArgs args) => AddItem(args) )"
196+
Icon="@IconName.Plus">
197+
Add Child
198+
</TreeListCommandButton>
199+
<TreeListCommandButton Command="Edit" Icon="@IconName.Edit">Edit</TreeListCommandButton>
200+
<TreeListCommandButton Command="Save" Icon="@IconName.Save" ShowInEdit="true">Update</TreeListCommandButton>
201+
<TreeListCommandButton Command="Cancel" Icon="@IconName.Cancel" ShowInEdit="true">Cancel</TreeListCommandButton>
202+
</TreeListCommandColumn>
203+
204+
<TreeListColumn Field="Name" Expandable="true" Width="320px" />
205+
<TreeListColumn Field="Id" Editable="false" Width="120px" />
206+
<TreeListColumn Width="120px" Title="Parent Data">
207+
<EditorTemplate>
208+
@{
209+
var parent = context as Employee;
210+
// One way to get the parent item from the Data based on the ID we provide, you can change as necessary
211+
<label>@parent.ParentData</label>
212+
} change as necessary
213+
</EditorTemplate>
214+
</TreeListColumn>
215+
<TreeListColumn Field="EmailAddress" Width="220px" />
216+
<TreeListColumn Field="HireDate" Width="220px" />
217+
</TreeListColumns>
218+
</TelerikTreeList>
219+
220+
@code {
221+
TelerikTreeList<Employee> TreeListRef { get; set; }
222+
223+
void AddItem(TreeListCommandEventArgs args)
224+
{
225+
Employee currItem = args.Item as Employee;
226+
var state = new TreeListState<Employee>();
227+
var itemToInsert = new Employee();
228+
itemToInsert.ParentData = $"Parent: {currItem.Name}"; // and/or other metadata
229+
state.ParentItem = currItem;
230+
state.InsertedItem = itemToInsert;
231+
TreeListRef?.SetState(state);
232+
}
233+
234+
public List<Employee> Data { get; set; }
235+
236+
// sample model
237+
238+
public class Employee
239+
{
240+
// hierarchical data collections
241+
public List<Employee> DirectReports { get; set; }
242+
243+
public string ParentData { get; set; }
244+
245+
// data fields for display
246+
public int Id { get; set; }
247+
public string Name { get; set; }
248+
public string EmailAddress { get; set; }
249+
public DateTime HireDate { get; set; }
250+
}
251+
252+
// data generation
253+
254+
// used in this example for data generation and retrieval for CUD operations on the current view-model data
255+
public int LastId { get; set; } = 1;
256+
257+
protected override async Task OnInitializedAsync()
258+
{
259+
Data = await GetTreeListData();
260+
}
261+
262+
async Task<List<Employee>> GetTreeListData()
263+
{
264+
List<Employee> data = new List<Employee>();
265+
266+
for (int i = 1; i < 15; i++)
267+
{
268+
Employee root = new Employee
269+
{
270+
Id = LastId,
271+
Name = $"root: {i}",
272+
EmailAddress = $"{i}@example.com",
273+
HireDate = DateTime.Now.AddYears(-i),
274+
DirectReports = new List<Employee>(), // prepare a collection for the child items, will be populated later in the code
275+
};
276+
data.Add(root);
277+
LastId++;
278+
279+
for (int j = 1; j < 4; j++)
280+
{
281+
int currId = LastId;
282+
Employee firstLevelChild = new Employee
283+
{
284+
Id = currId,
285+
Name = $"first level child {j} of {i}",
286+
EmailAddress = $"{currId}@example.com",
287+
HireDate = DateTime.Now.AddDays(-currId),
288+
DirectReports = new List<Employee>(), // collection for child nodes
289+
};
290+
root.DirectReports.Add(firstLevelChild); // populate the parent's collection
291+
LastId++;
292+
293+
for (int k = 1; k < 3; k++)
294+
{
295+
int nestedId = LastId;
296+
// populate the parent's collection
297+
firstLevelChild.DirectReports.Add(new Employee
298+
{
299+
Id = LastId,
300+
Name = $"second level child {k} of {j} and {i}",
301+
EmailAddress = $"{nestedId}@example.com",
302+
HireDate = DateTime.Now.AddMinutes(-nestedId)
303+
}); ;
304+
LastId++;
305+
}
306+
}
307+
}
308+
309+
return await Task.FromResult(data);
310+
}
311+
}
312+
````

0 commit comments

Comments
 (0)