Kendo Grid Edit Undo Deleting Row from Grid
I have a Kendo grid like ::
@(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 add a newline manually using Javascript like ::
var Grid = $("#Passenger").data("kendoGrid");
var datasource = Grid.dataSource;
datasource.add({
PassengerID: response.PassengerID,
Name: response.Name
});
datasource.sync();
But the problem is I am trying to edit and hitting the cancel button while editing. Then the row is removed from the Grid.
I referenced this question link , this solution doesn't work for me.
source to share
The problem is that when adding to the data source with
dataSource.add()
It internally puts the "new" flag on the element. Therefore, if you cancel the item, it will be removed. I have no idea why they do this, it's the dumbest thing. To do inline editing work with a cancel button and you add your own data on the fly, you need to call
dataSource.pushCreate(data)
It does the same thing. However, it also allows you to check the old data for updates in _pristineData.
I really hope this helps someone. I just found this from one liner somewhere in the kendo documentation.
This also applies to deletion. The datasource function that does this
dataSource.pushDestroy(data)
source to share
You must return the PassengerID of the newly inserted item. Check the ajax edit 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));
}
source to share
You MUST define the schema id property, it is used to determine if the model is new or not.
see: https://www.telerik.com/forums/inline-editing-cancel-removes-the-row
source to share