or
var gridData = [ { Id: 1, PaymentDate: '1/1/2015', Amount: 100 }, { Id: 2, PaymentDate: '2/1/2015', Amount: 200 }, { Id: 3, PaymentDate: '3/1/2015', Amount: 300 }, { Id: 4, PaymentDate: '4/1/2015', Amount: 400 },];$(function() { $("#grid").kendoGrid({ dataSource: { data: gridData, schema: { model: { id: "Id", fields: { Id: { type: "number" }, PaymentDate: { type: "date" }, Amount: { type: "number" } } }, } }, editable: { mode: "inline" }, toolbar: ["create", "save", "cancel"], columns: [ { field: "Id", title: "Id", width: "150px" }, { field: "PaymentDate", title: "Payment Date", format: "{0:" + dateFormat + "}", width: "150px" }, { field: "Amount", title: "Amount", format: "{0:c}", width: "150px" }, { command: ["edit", "destroy"] } ] }); grid = $("#grid").data("kendoGrid");})function show() { var data = grid.dataSource.data(); var destroyed = grid.dataSource._destroyed; for (i = 0; i < data.length; i++) { if (data[i].dirty) { console.log(data[i].Id); } } for (i = 0; i < destroyed.length; i++) { console.log(destroyed[i].Id); }}var path = "M10 0 L90 0 L100 25 L90 50 L10 50 L0 25 Z";var block = new kendo.dataviz.diagram.Path({ width: dataItem.width, height: dataItem.height, fill: { color: 'green' }, data: path });<!DOCTYPE html><html><head> <base href="http://demos.telerik.com/kendo-ui/listview/mvvm"> <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style> <title></title> <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" /> <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" /> <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css" /> <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css" /> <script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script> <script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script> <link rel="stylesheet" href="../content/shared/styles/examples-offline.css"> <script src="../content/shared/js/console.js"></script></head><body> <div id="example"> <div class="demo-section k-header"> <div class="box-col" style="width: 420px;"> <h4>Update a record</h4> <div data-role="listview" data-edit-template="edit-template" data-template="template" data-bind="source: products, visible: isVisible, events: { save: onSave }" style="width: 420px; height: 200px; overflow: auto"></div> </div> <div class="box-col console-section"> <h4>Console</h4> <div class="console"></div> </div> </div> <script type="text/x-kendo-tmpl" id="template"> <div class="product-view k-widget"> <div class="edit-buttons"> <a class="k-button k-button-icontext k-edit-button" href="\\#"><span class="k-icon k-edit"></span></a> <a class="k-button k-button-icontext k-delete-button" href="\\#"><span class="k-icon k-delete"></span></a> </div> <dl> <dt>Product Name</dt> <dd>#:ProductName#</dd> <dt>Unit Price</dt> <dd>#:kendo.toString(UnitPrice, "c")#</dd> <dt>Units In Stock</dt> <dd>#:UnitsInStock#</dd> <dt>Discontinued</dt> <dd>#:Discontinued#</dd> </dl> </div> </script> <script type="text/x-kendo-tmpl" id="edit-template"> <div class="product-view k-widget"> <div class="edit-buttons"> <a class="k-button k-button-icontext k-update-button" href="\\#"><span class="k-icon k-update"></span></a> <a class="k-button k-button-icontext k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span></a> </div> <dl> <dt>Product Name</dt> <dd> <input title="Phone Number" name="PhoneNumber" type="text" class="k-textbox k-invalid" required="" data-bind="value: PhoneNumber" data-mask="(000) 000-0000" data-role="maskedtextbox" data-value-update="keyup" placeholder="Phone Number" pattern="^\(([0-9]{3})\) {1}([0-9]{3})-{1}([0-9]{4})$" /> </dd> <dt>Unit Price</dt> <dd> <input type="text" data-bind="value:UnitPrice" data-role="numerictextbox" data-type="number" name="UnitPrice" required="required" min="1" validationMessage="required" /> <span data-for="UnitPrice" class="k-invalid-msg"></span> </dd> <dt>Units In Stock</dt> <dd> <input type="text" data-bind="value:UnitsInStock" data-role="numerictextbox" name="UnitsInStock" required="required" data-type="number" min="0" validationMessage="required" /> <span data-for="UnitsInStock" class="k-invalid-msg"></span> </dd> <dt>Discontinued</dt> <dd><input type="checkbox" name="Discontinued" data-bind="checked:Discontinued"></dd> </dl> </div> </script> <div class="box"> <div class="box-col" style="width: 420px;"> <h4>Configuration</h4> <div> <label><input type="checkbox" data-bind="checked: isVisible">Visible</label> </div> </div> <div class="box-col"> <h4>Information</h4> Kendo UI ListView supports the <a href="http://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/events">events</a>, <a href="http://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/source">source</a> and <a href="http://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/visible">visible</a> bindings. </div> </div><script> var viewModel = kendo.observable({ isVisible: true, onSave: function(e) { kendoConsole.log("event :: save(" + kendo.stringify(e.model, null, 4) + ")"); }, products: new kendo.data.DataSource({ schema: { model: { id: "ProductID" } }, batch: true, transport: { read: { dataType: "jsonp" }, update: { dataType: "jsonp" }, destroy: { dataType: "jsonp" }, parameterMap: function(options, operation) { if (operation !== "read" && options.models) { return {models: kendo.stringify(options.models)}; } } } }) }); kendo.bind($("#example"), viewModel);</script> <style scoped> .product-view { float: left; position: relative; width: 400px; margin: -1px -1px 0 0; } .product-view dl { margin: 10px 0; padding: 0; min-width: 0; } .product-view dt, dd { float: left; margin: 0; padding: 3px; height: 32px; width: 180px; line-height: 32px; overflow: hidden; } .product-view dt { clear: left; padding: 3px 5px 3px 0; text-align: right; opacity: 0.6; width: 100px; } .product-view .k-textbox { width: auto; } .edit-buttons { position: absolute; top: 0; right: 0; width: 26px; height: 160px; padding: 2px 2px 0 3px; background-color: rgba(0,0,0,0.1); } .edit-buttons .k-button { width: 26px; margin-bottom: 1px; } .k-pager-wrap { border-top: 0; } span.k-invalid-msg { position: absolute; margin-left: 6px; } </style></div></body></html>