Kendo UI Grid Expand to Edit

Combining batch edit and expand edit on Kendo UI Grid

by Joe Wilson

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1021/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1021/styles/kendo.default.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.3.1021/js/kendo.all.min.js"></script>
<div id="myGrid"></div> 

<script type="text/x-kendo-template" id="myDetailTemplate">
  <div class="form-group">
    <label for="testNumber">Test Number</label>
    <input name="testNumber" class="form-control w-25" data-bind="value: testNumber" />
  </div>
  <div class="form-group">
    <label for="testString">Test String</label>
    <input name="testString" class="form-control w-25" data-bind="value: testString" />
  </div>
  <div class="form-group">
    <label for="testDate" class="d-block">Test Date</label>
    <input name="testDate" class="form-control" data-bind="value: testDate" data-role="datepicker" />
  </div>
  <button class="btn btn-secondary btn-collapse">Done</button>
</script>

JavaScript

$(document).ready(() => {
  const testData = [
    { testNumber: 123, testString: "apple", testDate: new Date(2020, 10, 14) },
    { testNumber: 456, testString: "pear", testDate: new Date(2020, 10, 15) },
    { testNumber: 789, testString: "plum", testDate: new Date(2020, 10, 16) },
  ];

  $("#myGrid").kendoGrid({
    dataSource: {
      data: testData,
      schema: {
        model: {
          fields: {
            testNumber: { type: "number" },
            testString: { type: "string" },
            testDate: { type: "date" }
          }
        }
      }
    },
    columns: [
      { field: "testNumber", title: "Test Number" },
      { field: "testString", title: "Test String" },
      { field: "testDate", title: "Test Date", format: "{0:d}" }
    ],
    editable: true,
    detailTemplate: kendo.template($("#myDetailTemplate").html()),
    detailInit: detailInit,
    detailCollapse: detailCollapse,
    dataBinding: dataBinding
  });
});

function detailInit(event) {
    const grid = $(event.masterRow).closest(".k-grid").data("kendoGrid");
    const masterRow = event.masterRow;
    const detailRow = event.detailRow;

    // Bind the expanded view (detailRow) to the values in the master row
    kendo.bind(detailRow, event.data);    

    // Handle the detail row Save button click
    detailRow.find(".btn-collapse").click(() => grid.collapseRow(masterRow));
}

function detailCollapse(event) {
    // After collapsing the expanded row, we have to repaint it in the grid
    repaintRow(event.masterRow);
}

function repaintRow(row) {
    const grid = $(row).closest(".k-grid").data("kendoGrid");
    const dataItem = grid.dataItem(row);
    const rowChildren = $(row).children("td[role='gridcell']");

    for (let i = 0; i < grid.columns.length; i++) {
        const column = grid.columns[i];
        const template = column.template;
        const cell = rowChildren.eq(i);

        if (column.field !== undefined) {
            if (template !== undefined) {
           ...