editable Boolean|Object (default: false)

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

editable can be set to a JavaScript object (which represents the editing configuration) or to a string (which specifies the edit mode).

The supported string values are:

  • (Default) inline
  • popup
  • incell
  • The inline and popup edit modes are triggered by the edit column command. Therefore, in order for these edit modes to work correctly, you need to have a column with the edit command.
  • In order for the edit operations to work correctly, configure the dataSource for CRUD operations.

Example - enabling editing

  <div id="treelist"></div>
  <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 - enabling popup editing

  <div id="treelist"></div>
  <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 edit mode that will be used.

The supported edit modes are:

  • inline
  • popup
  • incell

The inline and popup edit modes are triggered by the edit column command. Therefore, in order for these edit modes to work correctly, you need to have a column with the edit command.

Example - specifyinging the inline edit mode

  <div id="treelist"></div>
  <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 the drag-and-drop UI of rows between parents.

Example - using the drag-and-drop functionality for editing the row parent node

  <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: {
        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 has to contain elements whose name HTML attribute is set to the name of the editable field. In this way, the TreeList recognizes the field to which it has to bind the each editor. Alternatively, use MVVM bindings for binding HTML elements to data item fields.

To initialize Kendo UI widgets in the template, use the role data attribute. For more information, refer to the data attribute initialization.

Example - customizing 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 set to popup. For more information, refer to the configuration API of the Window.

Example - configuring the Window in the popup edit mode

  <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>
In this article
Not finding the help you need? Improve this article