columns.editor String|Function

Provides a way to specify a custom editing UI for the column. Use the container parameter to create the editing UI.

The editing UI should contain an element whose name HTML attribute is set as the column field.

Validation settings defined in the model.fields configuration will not be applied automatically. In order the validation to work, the developer is responsible for attaching the corresponding validation attributes to the editor input the data-bind attribute is whitespace sensitive. In case the custom editor is a widget, the developer should customize the validation warning tooltip position in order to avoid visual issues.

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

Parameters

container jQuery

The jQuery object representing 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 specified via the format option.

options.model kendo.data.Model

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

options.values Array

Array of values specified via the values option.

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

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [ {
    field: "name",
    editor: function(container, options) {
     // create an input element
     var input = $("<input/>");
     // set its name to the field to which the column is bound ('name' in this case)
     input.attr("name", options.field);
     // append it to the container
     input.appendTo(container);
     // initialize a Kendo UI AutoComplete
     input.kendoAutoComplete({
       dataTextField: "name",
       dataSource: [
         { name: "Jane Doe" },
         { name: "John Doe" }
       ]
     });
    }
  } ],
  editable: true,
  dataSource: [ { name: "Jane Doe" }, { name: "John Doe" } ]
});
</script>

Example - create a custom column editor with validation

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [ {
    field: "num",
    editor: function(container, options) {
     //create input element and add the validation attribute
     var input = $('<input name="' + options.field + '" required="required" />');
     //append the editor
     input.appendTo(container);
     //enhance the input into NumericTextBox
     input.kendoNumericTextBox();

     //create tooltipElement element, NOTE: data-for attribute should match editor's name attribute
     var tooltipElement = $('<span class="k-invalid-msg" data-for="' + options.field + '"></span>');
     //append the tooltip element
     tooltipElement.appendTo(container);
   }
  } ],
  editable: true,
  scrollable: false,
  dataSource: {
    data: [ { num: 1 }, { num: 2 } ],
    schema: {
      model: {
        fields: {
          num: { type: "number", validation: { required: true } }
        }
      }
    }
  }
});
</script>

Check Editing custom editor for a live demo.

Example - create a custom column editor using String literal

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [ {
    field: "num",
    editor: "NumericTextBox"
  } ],
  editable: true,
  scrollable: false,
  dataSource: {
    data: [ { num: 1 }, { num: 2 } ],
    schema: {
      model: {
        fields: {
          num: { type: "number", validation: { required: true } }
        }
      }
    }
  }
});
</script>