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>
</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: event => kendo.bind(event.detailRow, event.data)
  });
});