Edit this page

Use Dynamic Editor in the Grid

Environment

Product Progress Kendo UI Grid
Progress Kendo UI 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 = $('<input type="text" class="k-input k-textbox" name="value" data-bind="value:value">');
            input.appendTo(container);
          }else{
            var input = $('<input type="checkbox" name="value" data-bind="value:value">');
            input.appendTo(container);
          }
        };


      });

    </script>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy