Editing Overview
The Kendo UI TreeList HtmlHelper provides a built-in editing functionality.
To implement the editing functionality of the TreeList:
Setting the Model
All CRUD operations of the TreeList 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
schema.model.fields.[parentIdField]
is nullable, root items with be items whoseparentId
field values arenull
. -
If the
schema.model.fields.[parentIdField]
is not nullable, root items will be items which have a default value for their data type.jsvar dataSource = new kendo.data.TreeListDataSource({ schema: { model: { id: "IdField", parentId: "ParentIdField", ...
Configuring the Transport
Once the schema is configured, you need to configure the transport
actions 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.
var dataSource = new kendo.data.TreeListDataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/EmployeeDirectory/All",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/EmployeeDirectory/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/EmployeeDirectory/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/EmployeeDirectory/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
Known Limitations
There are limitations when using editing along with other features of the component.
- If filtering is applied and
serverOperation
is disabled in the DataSource configuration, adding new records is not allowed.