New to Kendo UI for jQuery? Start a free 30-day trial

Editable

configuration

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.

editable

Boolean|Object

Default: false

  <div id="treelist"></div>
  <script>
      var crudServiceBaseUrl = "https://demos.telerik.com/service/v2/core";

      $("#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"
            },
            update: {
              url: crudServiceBaseUrl + "/EmployeeDirectory/Update",
              type: "POST",
              contentType: "application/json"
            },
            parameterMap: function(options, operation) {
              if (operation !== "read" && options.models) {
                return 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>

  <div id="treelist"></div>
  <script>
      var crudServiceBaseUrl = "https://demos.telerik.com/service/v2/core";

      $("#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"
            },
            update: {
              url: crudServiceBaseUrl + "/EmployeeDirectory/Update",
              type: "POST",
              contentType: "application/json"
            },
            parameterMap: function(options, operation) {
              if (operation !== "read" && options.models) {
                return 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

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.

Default: "inline"

  <div id="treelist"></div>
  <script>
      var crudServiceBaseUrl = "https://demos.telerik.com/service/v2/core";

      $("#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"
            },
            update: {
              url: crudServiceBaseUrl + "/EmployeeDirectory/Update",
              type: "POST",
              contentType: "application/json"
            },
            parameterMap: function(options, operation) {
              if (operation !== "read" && options.models) {
                return 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|Object

Enables the drag-and-drop UI of rows between parents.

Default: false

  <div id="treelist"></div>
  <script>
    var service = "https://demos.telerik.com/service/v2/core";

    $("#treelist").kendoTreeList({
      dataSource: {
        transport: {
          read: {
            url: service + "/EmployeeDirectory/All"
          }
        },
        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.

  <div id="treelist"></div>
  <script id="popup-editor" type="text/x-kendo-template">
		<h3>Edit Person</h3>
		<p>
		  <label>First Name:<input name="FirstName" /></label>
		</p>
		<p>
		  <label>Last Name:<input name="LastName" /></label>
		</p>
		<p>
		  <label>Position:
          <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/service/v2/core";

    $("#treelist").kendoTreeList({
      dataSource: {
        transport: {
          read: {
            url: service + "/EmployeeDirectory/All"
          }
        },
        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>

  <div id="treelist"></div>
  <script id="popup-editor" type="text/x-kendo-template">
		<h3>Edit Person</h3>
		<p>
		  <label>First Name:<input data-bind="value: FirstName" /></label>
		</p>
		<p>
		  <label>Last Name:<input data-bind="value: LastName" /></label>
		</p>
		<p>
		  <label>Position:
      <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/service/v2/core";

    $("#treelist").kendoTreeList({
      dataSource: {
        transport: {
          read: {
            url: service + "/EmployeeDirectory/All"
          }
        },
        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.

  <div id="treelist"></div>
  <script>
    var service = "https://demos.telerik.com/service/v2/core";

    $("#treelist").kendoTreeList({
      dataSource: {
        transport: {
          read: {
            url: service + "/EmployeeDirectory/All"
          }
        },
        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>