When using a local dataSource with the Kendo UI Grid component, the cancelRow() method causes an issue in certain cases. If the Grid has a dataSource that contains 1 item, for example, and you then add 1 more item to the dataSource by using the DataSource.add() method or replacing it with a new data source using the DataSource.data() method, then edit a row and execute the cancelRow() method, the grid behaves as if none of the new items exist – any items that were part of the original dataSource remain in the grid after cancelRow(), but any other items are removed entirely. After digging a bit into the dataSource object, it seems that the _pristine array is not updated when adding items or replacing the root data array, and the _pristine array may be what is used during the cancelRow() process. Here’s a working example illustrating the issue:
$("#grid").kendoGrid({
editable: "inline",
columns: [
{
field: null,
title: "",
template: "<a href='\\#' class='edit'>Edit</a>, <a href='\\#' class='cancel'>Cancel</a>, <a href='\\#' class='update'>Update</a>"
},
{
field: "name",
title: "Name"
},
{
field: "other",
title: "Other"
}
],
dataSource: [
{
name: "name1",
other: "other1"
}
],
save: function() {
this.refresh();
},
dataBound: function() {
var $grid = $("#grid");
var grid = $grid.data("kendoGrid");
$grid.find("a.edit").click(function (e) {
e.preventDefault();
var index = $(this).closest("tr").index();
grid.editRow(grid.tbody.find(">tr:eq(" + index + ")"));
grid.tbody.find(">tr:eq(" + index + ") td:eq(1) input").focus();
});
$grid.find("a.cancel").click(function (e) {
e.preventDefault();
grid.cancelRow();
});
$grid.find("a.update").click(function (e) {
e.preventDefault();
grid.saveRow();
});
}
});
var $grid = $("#grid");
var grid = $grid.data("kendoGrid");
//fails with initial empty datasource
$("#grid").data("kendoGrid").dataSource.add(
{
name: "name2",
other: "other2"
}
);
3 Answers, 1 is accepted
You are correct, the problem is connected with the internal _pristine array which is used for reverting the changes. This behaviour is caused by the current implementation and in order to avoid it you should use custom transport and dataItems with unique IDs.
This example demonstrates grid CRUD operations with local data: http://jsfiddle.net/AWyLf/37/
Regards,
Alexander Valchev
the Telerik team
Rank 1
This is not considered as a bug - cancelling changes reverts the DataSource to its original state. In order to update the original state the DataSource should be synchronized through the transport.
I am afraid that changing the current implementation is not in our immediate plans, nevertheless I will forward your feedback to the team for further discussions.
Kind regards,
Alexander Valchev
the Telerik team