Kendo UI Bug? Grid with XML data source
Update followed by Cancel reverts field to pre-Update value
by Alex Yu
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 Roger for Name
<li>Click OK
<li>The Name will change to Roger, which corresponds to the response in 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 to have Roger and Cancel should have gone back to Roger.
<li>If a database was involved, the data base would have Roger the grid would be showing Daphne... Not a good thing.
CSS
#containers {border:1px solid black}
JavaScript
readEmulationXmlString
= '<?xml version="1.0" encoding="windows-1252" ?>'
+ '<TABLE>'
+ '<CONTAINERS>'
+ '<NodeID>1001</NodeID>'
+ '<Name>Zaphod</Name>'
+ '</CONTAINERS>'
+ '<CONTAINERS>'
+ '<NodeID>1002</NodeID>'
+ '<Name>Daphne</Name>'
+ '</CONTAINERS>'
+ '</TABLE>'
;
//
updateEmulationXmlString
= '<?xml version="1.0" encoding="windows-1252" ?>'
+ '<TABLE>'
+ '<CONTAINERS>'
+ '<NodeID>1002</NodeID>'
+ '<Name>Roger</Name>'
+ '</CONTAINERS>'
+ '</TABLE>'
;
ds1 = new kendo.data.DataSource ({
transport: {
read: { url: '/echo/xml/', type: 'POST', data: { xml: readEmulationXmlString } },
update: { url: '/echo/xml/', type: 'POST', data: { xml: updateEmulationXmlString } }
},
schema: {
type: 'xml',
data: '/TABLE/CONTAINERS',
model: {
id: 'nodeID',
fields: {
nodeID: { editable: false, field: "NodeID/text()" },
name: { editable: true, field: "Name/text()" }
}
}
}
});
$('#containers').kendoGrid ({
dataSource: ds1,
height:140,
columns: [
{ field: "name", title: "Name" },
{ command: [ {name:"edit", text:"Rename"} ], title:" ", width:"10em" }
],
editable: {
mode: "popup"
}
});