Kendo UI Grid, editable, not working for local data
I work with the Kendo user interface network. This is my code:
<body> <div id="myGrid"></div> <script type="text/javascript"> $(function(){ var rows = [ {name: "name001", id: "001", group: "G1"}, {name: "name002", id: "002", group: "G1"}, {name: "name003", id: "003", group: "G2"}, {name: "name004", id: "004", group: "G2"}, ]; var myDataSource = new kendo.data.DataSource({ data: rows, pageSize: 3, }); myDataSource.read(); $("#myGrid").kendoGrid({ dataSource: myDataSource, columns: [ {field:"name", title:"The Name"}, {field:"id", title:"The Id"}, {field:"group"}, {command:["edit", "destroy"]} ], scrollable: false, pageable: true, sortable: true, groupable: true, filterable: true, editable: "inline" }); }); </Script> </body> But editing doesn't work. Opening this grid in the browser gives me a grid that looks as expected using the "Edit" and "Delete" buttons. I can delete rows using the "Delete" button. But clicking "Change" changes the line in edit mode (with input fields in the cells), but changing the value and clicking the "Update" button does nothing. The line remains in edit mode, and the Refresh button does not switch to Edit as intended. Can you tell me what is missing? Should I somehow customize my data source?
Yes, you skipped setting up your Grid data source to know how to update records. I assume that you want to edit records only locally (on the client) - without sending them to the server. To actually close the Grid and apply the changes, you can use the Grid save event and update method.
Here is jsbin with your case.
If you want to save these changes to the server, I suggest you start with demos .