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.

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.GanttTask

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>
<script>
$("#gantt").kendoGantt({
  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
      input.appendTo(container);
      // initialize a Kendo UI AutoComplete
      input.kendoAutoComplete({
        dataTextField: "title",
        dataSource: [
          { title: "Jackson" },
          { title: "Strong" },
          { title: "Simon"}
        ]
      });
    }
  }, "start", "end"]
});
</script>