Kendo grid supports custom editors for in-cell editing within the grid. In enterprise applications, it would be helpful to display custom editors such as following:

  1. Kendo numeric text box for numeric columns
  2. Kendo calendar or date time picker for date and datetime type of columns
  3. Text area for a long description columns.

Here is an example of how to display text area within kendo grid.

 function textAreaEditor(container, options) {
$('<textarea class="k-textbox" name="' + options.field + '" style="width:100%;height:100%;" />').appendTo(container);
}

 //use above function in grid configuration
columns: [
{ field: "description", width: "300px", editor: textAreaEditor }
]

Here is example to show numeric text box:

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);

 Here is how the text area will look within Kendo Grid.

To visit more of such tips and tricks go to - Kendo UI Grid Tips and Tricks