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)

Answer 2

You have to return the PassengerID of the newly inserted item. Check the ajax editing documentation :

public ActionResult Products_Create([DataSourceRequest]DataSourceRequest request, ProductViewModel product)
{
    if (ModelState.IsValid)
    {
        using (var northwind = new NorthwindEntities())
        {
            // Create a new Product entity and set its properties from the posted ProductViewModel
            var entity = new Product
            {
                ProductName = product.ProductName,
                UnitsInStock = product.UnitsInStock
            };
            // Add the entity
            northwind.Products.Add(entity);
            // Insert the entity in the database
            northwind.SaveChanges();
            // Get the ProductID generated by the database
            product.ProductID = entity.ProductID;
        }
    }
    // Return the inserted product. The grid needs the generated ProductID. Also return any validation errors.
    return Json(new[] { product }.ToDataSourceResult(request, ModelState));
}

Answer 3

You MUST define id property of the schema, it is used interanaly to know the model is new or not.

see: https://www.telerik.com/forums/inline-editing-cancel-removes-the-row