Skip to content

KB article on how to get the parent item for the TreeList when inserting a child. #155

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 20, 2020
Merged

KB article on how to get the parent item for the TreeList when inserting a child. #155

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9f780d4
feat(kb): get parent item on insert for the treelist
svdimitr Oct 20, 2020
fceec9d
chore(kb): treelist get parent on insert improvements
marin-bratanov Oct 20, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
312 changes: 312 additions & 0 deletions knowledge-base/treelist-get-parent-item-on-insert.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
<table>
<tbody>
<tr>
<td>Product</td>
<td>TreeList for Blazor</td>
</tr>
<tr>
<td>Version</td>
<td>2.18.0 and later</td>
</tr>
</tbody>
</table>


## 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;

<TelerikTreeList Data="@Data"
EditMode="@TreeListEditMode.Popup"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Check how things are in InLine mode and whether the ParentItem is needed here too. If so - add it to the snippet.

IdField="Id"
ParentIdField="ParentId"
Pageable="true"
Width="850px"
Height="400px"
@ref="@TreeListRef">
<TreeListColumns>
<TreeListCommandColumn Width="100px">
<TreeListCommandButton Command="MyAdd"
OnClick="@( (TreeListCommandEventArgs args) => AddItem(args) )"
Icon="@IconName.Plus">
Add Child
</TreeListCommandButton>
<TreeListCommandButton Command="Edit" Icon="@IconName.Edit">Edit</TreeListCommandButton>
<TreeListCommandButton Command="Save" Icon="@IconName.Save" ShowInEdit="true">Update</TreeListCommandButton>
<TreeListCommandButton Command="Cancel" Icon="@IconName.Cancel" ShowInEdit="true">Cancel</TreeListCommandButton>
</TreeListCommandColumn>

<TreeListColumn Field="Name" Expandable="true" Width="320px" />
<TreeListColumn Field="Id" Width="120px" />
<TreeListColumn Field="ParentId" Width="120px">
<EditorTemplate>
@{
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();
<label>@parent.Name</label>
}
</EditorTemplate>
</TreeListColumn>
<TreeListColumn Field="EmailAddress" Width="120px" />
<TreeListColumn Field="HireDate" Width="220px" />
</TreeListColumns>
</TelerikTreeList>

@code {
public TelerikTreeList<Employee> 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<Employee>();
state.InsertedItem = itemToInsert;
TreeListRef?.SetState(state);
}

public List<Employee> 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<List<Employee>> GetTreeListData()
{
List<Employee> data = new List<Employee>();

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 *@

<TelerikTreeList Data="@Data"
EditMode="@TreeListEditMode.Popup"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I added this, make sure things are OK with it and the editor template, also test with InLine mode.

ItemsField="@(nameof(Employee.DirectReports))"
Pageable="true"
Width="850px"
@ref="@TreeListRef">
<TreeListColumns>
<TreeListCommandColumn Width="100px">
<TreeListCommandButton Command="MyAdd"
OnClick="@( (TreeListCommandEventArgs args) => AddItem(args) )"
Icon="@IconName.Plus">
Add Child
</TreeListCommandButton>
<TreeListCommandButton Command="Edit" Icon="@IconName.Edit">Edit</TreeListCommandButton>
<TreeListCommandButton Command="Save" Icon="@IconName.Save" ShowInEdit="true">Update</TreeListCommandButton>
<TreeListCommandButton Command="Cancel" Icon="@IconName.Cancel" ShowInEdit="true">Cancel</TreeListCommandButton>
</TreeListCommandColumn>

<TreeListColumn Field="Name" Expandable="true" Width="320px" />
<TreeListColumn Field="Id" Editable="false" Width="120px" />
<TreeListColumn Width="120px" Title="Parent Data">
<EditorTemplate>
@{
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
<label>@parent.ParentData</label>
} change as necessary
</EditorTemplate>
</TreeListColumn>
<TreeListColumn Field="EmailAddress" Width="220px" />
<TreeListColumn Field="HireDate" Width="220px" />
</TreeListColumns>
</TelerikTreeList>

@code {
TelerikTreeList<Employee> TreeListRef { get; set; }

void AddItem(TreeListCommandEventArgs args)
{
Employee currItem = args.Item as Employee;
var state = new TreeListState<Employee>();
var itemToInsert = new Employee();
itemToInsert.ParentData = $"Parent: {currItem.Name}"; // and/or other metadata
state.ParentItem = currItem;
state.InsertedItem = itemToInsert;
TreeListRef?.SetState(state);
}

public List<Employee> Data { get; set; }

// sample model

public class Employee
{
// hierarchical data collections
public List<Employee> 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<List<Employee>> GetTreeListData()
{
List<Employee> data = new List<Employee>();

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<Employee>(), // 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<Employee>(), // 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);
}
}
````