Editing Overview
The Telerik UI TreeList provides a built-in editing functionality.
To implement the editing functionality of the TreeList:
The Editing is part of Telerik UI for ASP.NET Core, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Setting the Model
All CRUD operations of the TreeList component require a model with Id and ParentId fields. Those models has to be configured in the DataSource of the TreeList. Based on the ParentId field, the TreeList distinguishes the root items. If the ParentId field is nullable, root items with be items whose ParentId field values are null. If the ParentId is not nullable, root items will be items which have a default value for their data type.
The following example demonstrates how to use the nullable model—items with ParentId null will be root items.
.DataSource(dataSource => dataSource
...
.Model(m => {
m.Id(f => f.EmployeeId);
m.ParentId(f => f.ReportsTo).Nullable(true);
<kendo-treelist name="treelist">
...
<treelist-datasource>
...
<schema>
<treelist-model id="EmployeeId" parent-id="ReportsTo">
<fields>
<field name="EmployeeId" type="number"></field>
<field name="ReportsTo" nullable="true"></field>
</fields>
</treelist-model>
</schema>
</treelist-datasource>
</kendo-treelist>
public int? ReportsTo { get; set; }
public int EmployeeId { get; set; }
The following example demonstrates how to use the non-nullable model—items with ParentId string.empty will be root items.
.DataSource(dataSource => dataSource
...
.Model(m => {
m.Id(f => f.EmployeeId);
m.ParentId(f => f.ReportsTo).Nullable(false);
<kendo-treelist name="treelist">
...
<treelist-datasource>
...
<schema>
<treelist-model id="EmployeeId" parent-id="ReportsTo">
<fields>
<field name="EmployeeId" type="number"></field>
<field name="ReportsTo" nullable="false"></field>
</fields>
</treelist-model>
</schema>
</treelist-datasource>
</kendo-treelist>
public string ReportsTo { get; set; }
public string EmployeeId { get; set; }
Configuring the Transport
Once the schema is configured, you need to configure the action methods in the DataSource for "Update", "Destroy", and "Create". An important part of the CRUD operations is the response from the service, which needs to return the manipulated records, so that the TreeList can apply the changes to the DataSource accordingly. The new records also have to contain the newly assigned within the service Id value.
.DataSource(dataSource => dataSource
.Create(create => create.Action("Create", "EmployeeDirectory"))
.Read(read => read.Action("All", "EmployeeDirectory"))
.Update(update => update.Action("Update", "EmployeeDirectory"))
.Destroy(delete => delete.Action("Destroy", "EmployeeDirectory"))
<kendo-treelist name="treelist">
...
<treelist-datasource>
<transport>
<create url="@Url.Action("Create","EmployeeDirectory")"/>
<read url="@Url.Action("All","EmployeeDirectory")"/>
<update url="@Url.Action("Update","EmployeeDirectory")"/>
<destroy url="@Url.Action("Destroy","EmployeeDirectory")"/>
</transport>
</treelist-datasource>
</kendo-treelist>
Edit Modes
The TreeList supports the following edit modes: