columns.editor 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.


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.


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

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

<div id="gantt"></div>
  dataSource: [
      id: 1,
      orderId: 0,
      parentId: null,
      title: "Task1",
      start: new Date("2014/6/17 9:00"),
      end: new Date("2014/6/17 11:00")
      id: 2,
      orderId: 1,
      parentId: null,
      title: "Task2",
      start: new Date("2014/6/17 12:00"),
      end: new Date("2014/6/17 14:00")
  columns: [{
    field: "title",
    editor: function(container, options) {
      // create an input element
      var input = $("<input/>");
      // set its name to the field to which the column is bound ('title' in this case)
      input.attr("name", options.field);
      // append it to the container
      // initialize a Kendo UI AutoComplete
        dataTextField: "title",
        dataSource: [
          { title: "Jackson" },
          { title: "Strong" },
          { title: "Simon"}
  }, "start", "end"]
In this article