Render Grid Editor in Column Template

Environment

Product	Progress® Kendo UI® Grid for jQuery
Operating System	All
Browser	All
Browser Version	All

Description

How can I render an input editor in a column template and provide the editing functionality?

Solution

The following example demonstrates how to render an input editor in a column template and provide the editing functionality.

    <div id="grid"></div>
    <script>
      function onDataBound(e) {
        editAll();   
      }

      function editAll() {
        var theGrid = $("#grid").data("kendoGrid");
        $("#grid tbody").find('tr').each(function () {
          var model =  theGrid.dataItem(this);
          kendo.bind(this,model);
        });
        $("#grid").focus();
      }

      $(document).ready(function () {
        var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
            dataSource = new kendo.data.DataSource({
              transport: {
                read:  {
                  url: crudServiceBaseUrl + "/Products",
                  dataType: "jsonp"
                },
                update: {
                  url: crudServiceBaseUrl + "/Products/Update",
                  dataType: "jsonp"
                },
                destroy: {
                  url: crudServiceBaseUrl + "/Products/Destroy",
                  dataType: "jsonp"
                },
                create: {
                  url: crudServiceBaseUrl + "/Products/Create",
                  dataType: "jsonp"
                },
                parameterMap: function(options, operation) {
                  if (operation !== "read" && options.models) {
                    return {models: kendo.stringify(options.models)};
                  }
                }
              },
              batch: true,
              pageSize: 10,
              schema: {
                model: {
                  id: "ProductID",
                  fields: {
                    ProductID: { editable: false, nullable: true },
                    ProductName: { validation: { required: true } },
                    UnitPrice: { type: "number", validation: { required: true, min: 1} },
                    Discontinued: { type: "boolean" },
                    UnitsInStock: { type: "number", validation: { min: 0, required: true } }
                  }
                }
              }
            });

        $("#grid").kendoGrid({
          dataSource: dataSource,

          pageable: true,
          height: 430,
          toolbar: ["create", "save", "cancel"],
          columns: [
            { template: "<span class='k-input k-textbox k-input-solid k-input-md k-rounded-md'><input data-bind='value:ProductName' class='k-input-inner' /></span>", title: "Product Name", width: 110 },
            { template: "<span class='k-input k-textbox k-input-solid k-input-md k-rounded-md'><input data-bind='value:UnitsInStock' class='k-input-inner' /></span>", title: "Units In Stock", width: 110 },
            { field: "Discontinued", width: 110 },
            { command: "destroy", title: "&nbsp;", width: 90 }],
          editable: true,
          dataBound: onDataBound
        });
      });
    </script>