How to write code for grid row cancel event in KENDO UI ASP.NET MVC

In this article I will explain How to write code for grid row cancel event in KENDO UI ASP.NET MVC

Below code is use full for bind data to grid.

In events section we write a row cancel event.

@(Html.Kendo().Grid<KendoUIMvcApplication1.Models.GenerateDataCorrespondingToItem>()

                .HtmlAttributes(new { style = "width:100%;" })

                .Name("grid_#=ID#")

                .Columns(columns =>

                {

                    columns.Bound(o => o.ID).Width(5).Visible(false);

                    columns.Bound(o => o.date).Width(50).Format("{0:MM-dd}").Title("Date");

                    //columns.Bound(o => o.item).Width(90).Title("Item");

                    columns.Bound(o => o.comp).Width(50).Title("Company");

                   

                    columns.Command(command => { command.Edit().Text(" ").UpdateText(" ").CancelText(" "); }).Width(75);

                })

                .Editable(editable => editable.Mode(GridEditMode.InLine))

                .Events(events => events.DataBound("dataBound1").Cancel("OnCancel"))

                .DataSource(dataSource => dataSource

                    .Ajax()

                    .PageSize(15)

                    .Events(events => { events.RequestEnd("RequestCompleted"); })

                    .Model(model =>

                           {

                               model.Id(o => o.ID);

                               model.Field(o => o.date).Editable(false);

                              

                           }

                            )

)

)

Below code is useful for grid row refresh, on that time automatically row data was cleared.

function OnCancel(e) {

                        var variable = e.sender._cellId;

                        var variable1 = "#grid_" + variable.split("_")[1];

                        var grid1 = $(variable1).data("kendoGrid");

                        grid1.refresh();

                    }