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>