Kendo UI Grid - from local data

Render a Kendo UI grid from local data source.

HTML

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css">
<script src="https://kendo.cdn.telerik.com/2016.1.112/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.material.min.css">
<script src="https://demos.telerik.com/kendo-ui/content/shared/js/products.js"></script>


<div id="example" >
    <div id="grid"></div>
</div>

JavaScript

$("#grid").kendoGrid({
  dataSource: {
    data: products,
    schema: {
      model: {
        fields: {
          ProductName: { type: "string" },
          UnitPrice: { type: "number" },
          UnitsInStock: { type: "number" },
          Discontinued: { type: "boolean" }
        }
      }
    },
    pageSize: 20
  },
  height: 550,
  scrollable: true,
  sortable: true,
  filterable: true,
  pageable: {
    input: true,
    numeric: false
  },
  columns: [
    "ProductName",
    { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" 	},
    { field: "UnitsInStock", title: "Units In Stock", width: "130px" },
    { field: "Discontinued", width: "130px" }
  ]
});



var grid = $("#grid").data('kendoGrid');
grid.bind("change", function (e) {
	console.log('CHANGE EVENT...') 
});