Editing Overview
The Telerik UI TreeList provides a built-in editing functionality.
To implement the editing functionality of the TreeList:
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);
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);
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"))
Edit Modes
The TreeList supports the following edit modes: