columns.editor String|Function

Provides a way to specify a custom editing UI for the column. To create the editing UI, use the container parameter.

• The editing UI has to contain an element with a set name HTML attribute. The attribute value has to match the field name.
• The validation settings that are defined in the model.fields configuration will not be applied automatically. In order for the validation to work, you (the developer) are responsible for attaching the corresponding validation attributes to the editor input. If the custom editor is a widget, to avoid visual issues, you can customize the tooltip position of the validation warning.

When used as String, defines the editor widget type. For further info check the Form API: field

Parameters

container jQuery

The jQuery object that represents the container element.

options Object

options.field String

The name of the field to which the column is bound.

options.format String

The format string of the column that is specified through the format option.

options.model kendo.data.TreeListModel

The model instance to which the current table row is bound.

Example - creating a custom column editor using the Kendo UI AutoComplete and NumericTextBox

<div id="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    columns: [
      {
        field: "lastName",
        editor: function(container, options) {
          // create an input element
          var input = $("<input/>");
          // set its name to the field to which the column is bound ('lastName' in this case)
          input.attr("name", options.field);
          // append it to the container
          input.appendTo(container);
          // initialize a Kendo UI AutoComplete
          input.kendoAutoComplete({
            dataTextField: "lastName",
            dataSource: [
              { lastName: "Jackson" },
              { lastName: "Strong" },
              { lastName: "Simon"}
            ]
          });
        }
      },
      {
        field: "number",
        editor: function(container, options) {
          $('<input required name="' + options.field + '"/>')
            .appendTo(container)
          // initialize a Kendo UI NumericTextBox
          .kendoNumericTextBox({
            decimals: 2,
            step: 0.1
          });
        },
        format: "{0:0}"
      },
      { field: "position"},
      { command: [ "edit" ] }
    ],
    editable: true,
    dataSource: [
      { id: 1, parentId: null, lastName: "Jackson", number: 10342.16, position: "CEO" },
      { id: 2, parentId: 1, lastName: "Weber", number: 18031.11, position: "VP, Engineering" }
    ]
  });
</script>

Example - creating a custom column editor with validation

<div id="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    columns: [
      {
        field: "lastName",
        editor: function(container, options) {
          // create input element and add the validation attribute
          var input = $('<input name="' + options.field + '" required="required" />');
          // set its name to the field to which the column is bound ('lastName' in this case)
          input.attr("name", options.field);
          // append it to the container
          input.appendTo(container);
          // initialize a Kendo UI AutoComplete
          input.kendoAutoComplete({
            dataTextField: "lastName",
            dataSource: [
              { lastName: "Jackson" },
              { lastName: "Strong" },
              { lastName: "Simon"}
            ]
          });
        }
      },
      { field: "position"},
      { command: [ "edit" ] }
    ],
    editable: "popup",
    dataSource: [
      { id: 1, parentId: null, lastName: "Jackson", position: "CEO" },
      { id: 2, parentId: 1, lastName: "Weber", position: "VP, Engineering" }
    ]
  });
</script>

Example - creating a custom column editor using String literal for AutoComplete

<div id="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    columns: [
      {
        field: "lastName",
        editor: "AutoComplete",
        editorOptions: {
          dataTextField: "lastName",
          dataSource: [
            { lastName: "Jackson" },
            { lastName: "Strong" },
            { lastName: "Simon"}
          ]
        }
      },
      {
        field: "number",
        format: "{0:0}"
      },
      { field: "position"},
      { command: [ "edit" ] }
    ],
    editable: "popup",
    dataSource: [
      { id: 1, parentId: null, lastName: "Jackson", number: 10342.16, position: "CEO" },
      { id: 2, parentId: 1, lastName: "Weber", number: 18031.11, position: "VP, Engineering" }
    ]
  });
</script>