New to Telerik UI for ASP.NET MVCStart a free 30-day trial

Editing Overview

The Telerik UI TreeList provides a built-in editing functionality.

To implement the editing functionality of the TreeList:

  1. Set the model
  2. Configure the transport

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.

tab-HtmlHelper
 	.DataSource(dataSource => dataSource
	...
	.Model(m => {
		m.Id(f => f.EmployeeId);
		m.ParentId(f => f.ReportsTo).Nullable(true);

The following example demonstrates how to use the non-nullable model—items with ParentId string.empty will be root items.

tab-HtmlHelper
 	.DataSource(dataSource => dataSource
	...
	.Model(m => {
		m.Id(f => f.EmployeeId);
		m.ParentId(f => f.ReportsTo).Nullable(false);

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.

Razor
  .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"))

Edit Modes

The TreeList supports the following edit modes:

See Also