grid error cancelChanges not working

[Brandon]

Hi,

I have a problem removing a newly added row or clearing updated values during update when calling Ajax Create or Update methods. I've tried e.sender.cancelChanges(); and also the code below with no luck. The error alert shows on the screen but the row sticks in the grid after hitting OK on the error window prompt. Is there a reason why the cancel changes is not updating the Json dataset after the error?

Error JS:

<script type="text/javascript">
    function error_handler(e) {
        if (e.errors) {

            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            //Display the message
            alert(message);

            // Cancel the changes.
            var grid = $("#meterGrid").data("kendoGrid");
            grid.cancelChanges();
        }
    }
</script>

 

My grid:

@(Html.Kendo().Grid<MeterSerialsViewModel>()
                    .Name("meterGrid")
                    .Columns(columns =>
                    {
                        columns.Command(command => { command.Edit(); }).Width(60).Visible(Model.IsEditable);
                        columns.Bound(o => o.MeterSerialId);
                        columns.Bound(o => o.VendorAccountId).Visible(false);
                        columns.Bound(o => o.MeterSerialName).Width(300);
                        columns.ForeignKey(o => o.CommodityId, (System.Collections.IEnumerable)ViewData["CommodityTypes"], "CommodityTypeId", "Name").EditorTemplateName("GridForeignKeyEditor").Title("Commodity").Width(250);
                        columns.Bound(o => o.IsActive).ClientTemplate("<input type='checkbox' disabled='disabled' #= IsActive ? checked='checked': checked='' # />");
                        columns.Bound(o => o.CreatedOn).Width(180).Format("{0:MM/dd/yyyy hh:mm tt}");
                    })
                    .ToolBar(toolbar =>
                    {
                        if (Model.IsEditable)
                        {
                            toolbar.Create();
                        }
                    })
                    .Pageable()
                    .Sortable()
                    .Editable(editable => editable.Mode(GridEditMode.InLine).Enabled(Model.IsEditable))
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .ServerOperation(false)
                        .PageSize(10)
                        .Events(events => { events.Error("error_handler"); })
                        .Model(model =>
                        {
                            model.Id(o => o.MeterSerialId);
                            model.Field(o => o.MeterSerialId).Editable(false);
                            model.Field(o => o.VendorAccountId).DefaultValue(Model.VendorAccountId).Editable(false);
                            model.Field(o => o.IsActive).DefaultValue(true);
                            model.Field(o => o.CreatedBy).Editable(false);
                            model.Field(o => o.CreatedOn).Editable(false);
                        })
                        .Sort(s => { s.Add("CommodityTypeName").Ascending(); })
                        .Read(r => r.Action("GetMeterSerials", "VendorAccounts", new { vendorAccountId = Model.VendorAccountId }))
                        .Create(c => c.Action("CreateMeterSerial", "VendorAccounts", new { vendorAccountId = Model.VendorAccountId }))
                        .Update(u => u.Action("UpdateMeterSerial", "VendorAccounts")))
)

 

Controller to exception testing error prompt:

catch (Exception ex)
            {
                ModelState.AddModelError(string.Empty, ex.ToString());
                return Json(new[] { model }.ToDataSourceResult(request, ModelState));
            }

 

[Boyan Dimitrov]

Hello Brandon,

I prepared a sample project that implements very similar scenario, but canceChanges method works fine. For testing purposes on each Update an error is added. After an item is updated and synced with the server the error event handler is called and the item is reverted to initial state. 

Regards,
Boyan Dimitrov
Telerik by Progress

[Brandon]

Hi Boyan,

Yes, your cancelChanges code matches my code as well. After further testing, I realized that the problem is not occurring when my View contains the grid itself, it is only not working when referencing a grid via PartialAsync call.

@await Html.PartialAsync("MeterSerials", new MeterSerialsViewModel()
                                   {
                                       VendorAccountId = Model.VendorAccountId,
                                       IsEditable = true
                                   })

 

I forced an exception and the alert is presented to the user but after clicking the "ok" button the grid preserves the added row or updated row until the page is refreshed. I noticed your example project is built on an older MVC web app project. I'm running my project in ASP.NET CORE 1.1 using the Telerik package "<PackageReference Include="Telerik.UI.for.AspNet.Core.Trial" Version="2017.1.223" />". Can you test your code in a CORE project using a PartialAsync view and see if you also see no cancelChanges executed in your grid?

 

Thanks,
Brandon

[Boyan Dimitrov]

Hello Brandon,

In general the both Telerik UI ASP.NET MVC and  UI for ASP.NET Core render the HTML and JavaScript needed to initialize a Kendo UI widget. The widget options propagate to the client-side via the widget initialization script.  Eventually the Kendo UI Grid is initialized using JavaScript and it does not really matter whether the html code and JavaScript are loaded using async partial view or not. 

Still I tested the scenario with ASP.NET CORE 1.1 and Telerik.UI.for.AspNet.Core 2017.1.223 and loaded the Kendo UI Grid with asyc await partial view. It all worked as expected. When error is stored in the ModelState on the server the client-side error event of the Kendo UI DataSource is fired and cancelChanges method will revert the changes to their initial state. 

Regards,
Boyan Dimitrov
Telerik by Progress