Kendo Grid - inline editing

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.common-bootstrap.min.css" />
  <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.bootstrap.min.css" />
  <script src="//kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>
</head>

<body>
  <div class="container">
    <h1 class="page-header">Edit</h1>
    <div class="row">
      <form method="post" id="form">
        <input type="hidden" name="Id" value="1" />
        <div class="col-md-3">
          <div class="form-group">
            <label>Name</label>
            <input class="form-control" name="Name" value="Name">
          </div>
        </div>
        <div class="col-md-3">
          <input type="submit" value="Post form with grid" class="btn btn-block btn-primary">
        </div>
        <div class="col-md-6">
          <span id="form-content"></span>
        </div>
        <div class="col-md-12">
          <div id="grid"></div>
        </div>
        <div class="col-md-12">
          <div id="grid"></div>
        </div>
      </form>
    </div>
  </div>


  <script type="text/javascript">
    $(document).ready(function() {
      var crudServiceBaseUrl = "//demos.telerik.com/kendo-ui/service",
        dataSource = new kendo.data.DataSource({
          transport: {
            read: {
              url: crudServiceBaseUrl + "/Products",
              dataType: "jsonp"
            }
          },
          batch: true,
          pageSize: 2,
          schema: {
            model: {
              id: "ProductID",
              fields: {
                ProductID: {
                  editable: false,
                  nullable: true
                },
                ProductName: {
                  validation: {
                    required: true
                  }
                },
                Discontinued: {
                  type: "boolean"
                }
              }
            }
          }
        });

      $("#grid").kendoGrid({
        dataSource: dataSource,
        pageable: true,
        height: 550,
        toolbar: ["create"],
        columns: [{
          field: "ProductID",
          hidden: true,
          template: "<input type='hidden' name='Products[#= index(data)#].ProductID' value='#= ProductID #' />"
        }, {
          field: "ProductName",
          title: "Product Name",
          template: "#= ProductName # <input type='hidden' name='Products[#= index(data)#].ProductName' value='#= ProductName #' />"
        }, {
          field: "Discontinued",
          template: "#= Discontinued # <input type='hidden' name='Products[#= index(data)#].Discontinued' value='#= Discontinued #' />"
        }, {
          command: ["edit", "destroy"],
          title: "&nbsp;",
          width: "250px"
        }],
        editable: "inline"
      });
    });

    function index(dataItem) {
      var data = $("#grid").data("kendoGrid").dataSource.data();

      return data.indexOf(dataItem);
    }


    $(function() {
      $('#form').submit(function(e) {
        e.preventDefault();
        $('#form-content').text(JSON.stringify($(this).serializeObject()));
      });
    });

    $.fn.serializeObject = function() {
      var o = {};
      var a = this.serializeArray();
      $.each(a, function() {
        if (o[this.name] !== undefined) {
          if (!o[this.name].push) {
            o[this.name] = [o[this.name]];
          }
          o[this.name].push(this.value || '');
        } else {
          o[this.name] = this.value || '';
        }
      });
      return o;
    };
  </script>

</body>

</html>

// Code goes here

/* Styles go here */