Kendo UI Bug? Grid with JSON data source
Update followed by Cancel reverts field to pre-Update value
by RichardAD
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.core.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.web.min.js"></script>
<div id="containers"></div>
<ul>Demonstration:
<li>Click on Rename in the row with Daphne
<li>Enter something for Name
<li>Click OK
<li>The Name will change to Roger, which corresponds to the updateEmulationXmlString
<li>Click on Rename again
<li>Type something
<li>Now click on Cancel
<li>The Name will revert to Daphne, this is incorrect. The response of the prior rename should have updated the _pristine information and Cancel should have gone back to Roger.
<li>If a database was involved, the data base would be correct and the grid would be showing incorrect data... Not a good thing.
CSS
#containers {border:1px solid black}
JavaScript
readEmulationJsonString
= JSON.stringify ([
{ NodeID: 1001, Name: "Zaphod" },
{ NodeID: 1002, Name: "Daphne" }
]);
updateEmulationJsonString
= JSON.stringify ([
{ NodeID: 1002, Name: "Roger" }
]);
ds1 = new kendo.data.DataSource ({
transport: {
read: { url: '/echo/json/', type: 'POST', data: { json: readEmulationJsonString } },
update: { url: '/echo/json/', type: 'POST', data: { json: updateEmulationJsonString } }
},
schema: {
model: {
id: 'NodeID',
fields: {
NodeID: { editable: false },
Name: { editable: true }
}
}
}
});
$('#containers').kendoGrid ({
dataSource: ds1,
height:140,
columns: [
{ field: "Name" },
{ command: [ {name:"edit", text:"Rename"} ], title:" ", width:"10em" }
],
editable: {
mode: "popup"
}
});