This is a migrated thread and some comments may be shown as answers.

Problems with calling cancelRow() on a grid with a local datasource

3 Answers 249 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Matt
Top achievements
Rank 1
Matt asked on 22 Jan 2013, 09:48 PM

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

Sort by
0
Alexander Valchev
Telerik team
answered on 24 Jan 2013, 01:22 PM
Hi Matt,

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Matt
Top achievements
Rank 1
answered on 24 Jan 2013, 04:51 PM
Thank you Alexander! We'll look into changing it over to this way ASAP. Is the current implementation considered a bug by your team? Will it be altered in the future?
0
Alexander Valchev
Telerik team
answered on 25 Jan 2013, 02:32 PM
Hello Matt,

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Matt
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Matt
Top achievements
Rank 1
Share this question
or