Editing Overview

The Kendo UI TreeList HtmlHelper 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 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 whose parentId field values are null.

• If the schema.model.fields.[parentIdField] is not nullable, root items will be items which have a default value for their data type.

  js

    	var 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.

js

var dataSource = new kendo.data.TreeListDataSource({
    transport: {
        read: {
            url: crudServiceBaseUrl + "/EmployeeDirectory/All"
        },
        update: {
            url: crudServiceBaseUrl + "/EmployeeDirectory/Update",
            type: "POST",
            contentType: "application/json"
        },
        destroy: {
            url: crudServiceBaseUrl + "/EmployeeDirectory/Destroy",
            type: "POST",
            contentType: "application/json"
        },
        create: {
            url: crudServiceBaseUrl + "/EmployeeDirectory/Create",
            type: "POST",
            contentType: "application/json"
        },
        parameterMap: function(options, operation) {
            if (operation !== "read" && options.models) {
                return 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.

See Also

• Editing in the TreeList (Demo)
• TreeList JavaScript API Reference