Edit this page

editable Boolean |Object (default: false)

If set to true the user would be able to edit the data to which the TreeList is bound. By default, editing is disabled.

Can be set to a string ("inline" or "popup") to specify the editing mode. The default editing mode is "inline".

Can be set to a JavaScript object which represents the editing configuration.

The "inline" and "popup" editing modes are triggered by the "edit" column command. Thus it is required to have a column with an "edit" command. To have edit operations work correctly in the TreeList, the dataSource has to be configured for CRUD operations.

Example - enable editing

  <script>
      var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service";

      $("#treelist").kendoTreeList({
        editable: true,
        height: 540,
        columns: [
          { field: "FirstName", title: "First Name", width: 220 },
          { field: "LastName", title: "Last Name", width: 100 },
          { field: "Position" },
          { title: "Edit", command: [ "edit" ], width: 180 }
        ],
        dataSource: {
          transport: {
            read:  {
              url: crudServiceBaseUrl + "/EmployeeDirectory/All",
              dataType: "jsonp"
            },
            update: {
              url: crudServiceBaseUrl + "/EmployeeDirectory/Update",
              dataType: "jsonp"
            },
            parameterMap: function(options, operation) {
              if (operation !== "read" && options.models) {
                return {models: kendo.stringify(options.models)};
              }
            }
          },
          schema: {
            model: {
              id: "EmployeeId",
              parentId: "ReportsTo",
              fields: {
                EmployeeId: { type: "number", editable: false, nullable: false },
                ReportsTo: { nullable: true, type: "number" },
                FirstName: { validation: { required: true } },
                LastName: { validation: { required: true } },
                Position: { type: "string" }
              },
              expanded: true
            }
          }
        }
      });
  </script>

Example - enable popup editing

  <script>
      var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service";

      $("#treelist").kendoTreeList({
        editable: "popup",
        height: 540,
        columns: [
          { field: "FirstName", title: "First Name", width: 220 },
          { field: "LastName", title: "Last Name", width: 100 },
          { field: "Position" },
          { title: "Edit", command: [ "edit" ], width: 180 }
        ],
        dataSource: {
          transport: {
            read:  {
              url: crudServiceBaseUrl + "/EmployeeDirectory/All",
              dataType: "jsonp"
            },
            update: {
              url: crudServiceBaseUrl + "/EmployeeDirectory/Update",
              dataType: "jsonp"
            },
            parameterMap: function(options, operation) {
              if (operation !== "read" && options.models) {
                return {models: kendo.stringify(options.models)};
              }
            }
          },
          schema: {
            model: {
              id: "EmployeeId",
              parentId: "ReportsTo",
              fields: {
                EmployeeId: { type: "number", editable: false, nullable: false },
                ReportsTo: { nullable: true, type: "number" },
                FirstName: { validation: { required: true } },
                LastName: { validation: { required: true } },
                Position: { type: "string" }
              },
              expanded: true
            }
          }
        }
      });
  </script>

editable.mode String (default: "inline")

The editing mode to use. The supported editing modes are "inline" and "popup".

The "inline" and "popup" editing modes are triggered by the "edit" column command. Thus it is required to have a column with an "edit" command.

Example - specify inline editing mode

  <script>
      var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service";

      $("#treelist").kendoTreeList({
        editable: {
            mode: "inline"
        },
        height: 540,
        columns: [
          { field: "FirstName", title: "First Name", width: 220 },
          { field: "LastName", title: "Last Name", width: 100 },
          { field: "Position" },
          { title: "Edit", command: [ "edit" ], width: 180 }
        ],
        dataSource: {
          transport: {
            read:  {
              url: crudServiceBaseUrl + "/EmployeeDirectory/All",
              dataType: "jsonp"
            },
            update: {
              url: crudServiceBaseUrl + "/EmployeeDirectory/Update",
              dataType: "jsonp"
            },
            parameterMap: function(options, operation) {
              if (operation !== "read" && options.models) {
                return {models: kendo.stringify(options.models)};
              }
            }
          },
          schema: {
            model: {
              id: "EmployeeId",
              parentId: "ReportsTo",
              fields: {
                EmployeeId: { type: "number", editable: false, nullable: false },
                ReportsTo: { nullable: true, type: "number" },
                FirstName: { validation: { required: true } },
                LastName: { validation: { required: true } },
                Position: { type: "string" }
              },
              expanded: true
            }
          }
        }
      });
  </script>

editable.move Boolean (default: false)

Enables drag&drop UI of rows between parents.

Example - use drag&drop for editing row parent node

    var service = "https://demos.telerik.com/kendo-ui/service";

    $("#treelist").kendoTreeList({
      dataSource: {
        transport: {
          read: {
            url: service + "/EmployeeDirectory/All",
            dataType: "jsonp"
          }
        },
        schema: {
          model: {
            id: "EmployeeID",
            parentId: "ReportsTo",
            fields: {
              ReportsTo: { field: "ReportsTo",  nullable: true },
              EmployeeID: { field: "EmployeeId", type: "number" },
              Extension: { field: "Extension", type: "number" }
            },
            expanded: true
          }
        }
      },
      height: 540,
      editable: {
        move: true
      },
      columns: [
        { field: "FirstName", title: "First Name", width: 220 },
        { field: "LastName", title: "Last Name", width: 160 },
        { field: "Position" }
      ]
    });
  </script>

editable.template String |Function

The template which renders the popup editor.

The template should contain elements which name HTML attribute is set to the name of the editable field. This is how the TreeList will know which field to bind each editor to. The other option is to use MVVM bindings in order to bind HTML elements to data item fields.

Use the role data attribute to initialize Kendo UI widgets in the template. Check data attribute initialization for more info.

Example - customize the popup editor

  <div id="treelist"></div>
  <script id="popup-editor" type="text/x-kendo-template">

<label>First Name:<input name="FirstName" /></label>
<label>Last Name:<input name="LastName" /></label>
<label>Position:
</label>
          <select name="Position">
            <option>Software Developer</option>
            <option>Team Lead</option>
            <option>Technical Lead</option>
          </select>
        </label>
    </p>
  </script>
  <script>
    var service = "https://demos.telerik.com/kendo-ui/service";

    $("#treelist").kendoTreeList({
      dataSource: {
        transport: {
          read: {
            url: service + "/EmployeeDirectory/All",
            dataType: "jsonp"
          }
        },
        schema: {
          model: {
            id: "EmployeeID",
            parentId: "ReportsTo",
            fields: {
              ReportsTo: { field: "ReportsTo",  nullable: true },
              EmployeeID: { field: "EmployeeId", type: "number" },
              Extension: { field: "Extension", type: "number" }
            },
            expanded: true
          }
        }
      },
      height: 540,
      editable: {
        template: kendo.template($("#popup-editor").html()),
        mode: "popup"
      },
      columns: [
        { field: "FirstName", title: "First Name", width: 220 },
        { field: "LastName", title: "Last Name", width: 160 },
        { field: "Position" },
        { command: ["edit"] }
      ]
    });
  </script>

Example - using MVVM in the popup editor template

  <div id="treelist"></div>
  <script id="popup-editor" type="text/x-kendo-template">

<label>First Name:<input data-bind="value: FirstName" /></label>
<label>Last Name:<input data-bind="value: LastName" /></label>
<label>Position:
</label>
      <select data-bind="value: Position">
        <option>CEO</option>
        <option>Team Lead</option>
        <option>Technical Lead</option>
        </select>
        </label>
    </p>
  </script>
  <script>
    var service = "https://demos.telerik.com/kendo-ui/service";

    $("#treelist").kendoTreeList({
      dataSource: {
        transport: {
          read: {
            url: service + "/EmployeeDirectory/All",
            dataType: "jsonp"
          }
        },
        schema: {
          model: {
            id: "EmployeeID",
            parentId: "ReportsTo",
            fields: {
              ReportsTo: { field: "ReportsTo",  nullable: true },
              EmployeeID: { field: "EmployeeId", type: "number" },
              Extension: { field: "Extension", type: "number" }
            },
            expanded: true
          }
        }
      },
      height: 540,
      editable: {
        template: kendo.template($("#popup-editor").html()),
        mode: "popup"
      },
      columns: [
        { field: "FirstName", title: "First Name", width: 220 },
        { field: "LastName", title: "Last Name", width: 160 },
        { field: "Position" },
        { command: ["edit"] }
      ]
    });
  </script>

editable.window Object

Configures the Kendo UI Window instance, which is used when the TreeList edit mode is "popup".

For more information, please refer to the Window configuration API.

Example - TreeList popup Window configuration

  <div id="treelist"></div>
  <script>
    var service = "https://demos.telerik.com/kendo-ui/service";

    $("#treelist").kendoTreeList({
      dataSource: {
        transport: {
          read: {
            url: service + "/EmployeeDirectory/All",
            dataType: "jsonp"
          }
        },
        schema: {
          model: {
            id: "EmployeeID",
            parentId: "ReportsTo",
            fields: {
              ReportsTo: { field: "ReportsTo",  nullable: true },
              EmployeeID: { field: "EmployeeId", type: "number" },
              Extension: { field: "Extension", type: "number" }
            },
            expanded: true
          }
        }
      },
      height: 540,
      editable: {
        mode: "popup",
        window: {
          title: "My Custom Title",
          animation: false,
          open: myOpenEventHandler
        }
      },
      columns: [
        { field: "FirstName", title: "First Name", width: 220 },
        { field: "LastName", title: "Last Name", width: 160 },
        { field: "Position" },
        { command: ["edit"] }
      ]
    });

    function myOpenEventHandler(e) {
      // ...
    }
  </script>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy