Use Dynamic Editor in the Grid

Environment

Product	Progress® Kendo UI® Grid for jQuery
Product Version	Created with version 2017.3.1026

Description

How can I have a column whose editor depends on the value of the Grid record?

Solution

1. Place a condition within the columns.editor function.
2. Based on that condition, add the corresponding editor template.

    <div id="grid"></div>


    <script>
      $(document).ready(function () {
        var dataSource1 = new kendo.data.DataSource({
          data: [{id:1,value:"value1"},{id:2,value:"value2"},{id:3,value:"value3"}],
          schema: {
            model: {
              fields: {
                id: { type: "number", editable:false },
                value: { type: "string" }
              }}
          },
          pageSize: 20
        });
        var grid = $("#grid").kendoGrid({
          dataSource: dataSource1,
          pageable: true,
          height: 500,
          columns: [
            { field: "id", title: "ID", width: "200px"},
            { field: "value", title: "Value", width: "200px", editor: dynamicEditor}],
          editable: "incell"
        }).data("kendoGrid");

        function dynamicEditor(container, options) {

          if(options.model.id == 1){
            var input = $('<input required data-bind="value:value"/>')
            input.appendTo(container);
            input.kendoDropDownList({
              autoBind: false,
              dataSource: {
                data:["value3","value4","value5"]
              }
            });
          }
          else if(options.model.id == 2){
            var input = $('<textarea  type="text" name="value" data-bind="value:value"></textarea>');
            input.appendTo(container)
            input.kendoTextArea({
              rows:5
            })
          }else{
            var input = $('<input type="text" class="k-textbox" name="value" data-bind="value:value">');
            input.appendTo(container);
          }
        };
      });

    </script>