Kendo Grid Edit Cancel deletes row from Grid

Question

I am having a Kendo Grid as::

   @(Html.Kendo().Grid<Models.PassengerGrid>()
                        .Name("Passenger")
                        .Columns(columns =>
                        {
                            columns.Bound(x => x.PassengerID).Hidden(true);
                            columns.Bound(x => x.Name).Title("Name").Width(500).Encoded(true);
                            columns.Command(command => { command.Edit(); command.Destroy(); });
                        })
                        .Editable(editable => editable.Mode(GridEditMode.InLine))
                        .HtmlAttributes(new { style = "height:430px;" })
                        .DataSource(dataSource => dataSource
                            .Ajax()
                            .PageSize(5)
                            .ServerOperation(true)
                            .Model(model => { model.Id(p => p.PassengerID); })
                            .Read(read => read.Action("PassengerDetailTemplate", "GetData"))
                            .Create(update => update.Action("EditingPopup_Update", "Grid"))
                            .Update(update => update.Action("EditingPopup_Update", "Grid"))
                            .Destroy(update => update.Action("EditingPopup_Destroy", "Grid"))
                        )
                    )

In which I am adding new Row manually by using Javascript as::

                var Grid = $("#Passenger").data("kendoGrid");
                            var datasource = Grid.dataSource;

                            datasource.add({
                                PassengerID: response.PassengerID,
                                Name: response.Name
                            });
                            datasource.sync();

But problem is when I am trying to edit & press cancel button while editing, Then the row gets deleted from Grid.

I have referred this question link ut this solution is not working for me.

Answer 1

The issue is that when you add to the datasource using

dataSource.add()

It internally puts a "new" flag on the item. So if you cancel the item it gets removed. I have no idea why they do this, it's the dumbest thing ever. To make inline editing work with the cancel button and you add your own data on the fly you need to call

dataSource.pushCreate(data)

This effectively does the same thing. However, it also allows you to check the old data on an update in _pristineData.

I really hope this helps someone. I only found this out from a one liner somewhere in the kendo documentation.

This is also the case with remove. The datasource function that does that is

dataSource.pushDestroy(data)