hasChanges not working in IE

[Matt]

I have an issue where a grid's datasource hasChanges function is not working in IE, but does work in Chrome.

When leaving the page, I check to see if there are changes to the grid's data source, and if there are changes I prompt to make sure they want to leave with unsaved changes.  In this example, I save changes successfully and the hasChanges still returns true after the save is complete. 

 

Controller update function:

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Minimum_Create([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<MinimumsViewModel> records)
{
    try {
        CDIWholesaleServiceClient client = new CDIWholesaleServiceClient();
        if (records.Any())
        {
            foreach (var record in records)
            {
                record.contractID = int.Parse(Request["globalContractID"]);
                var input = WholesaleDataMapper.ConvertMinimumRate(record);
                var output = client.InsertMinimumRate(input);
                record.id = output.MinimumID;
            }
        }

        return Json(records.ToDataSourceResult(request, ModelState));
    }
    catch(Exception ex)
    {
        ModelState.AddModelError("Minimum Creation Error", ex.Message);
        return Json(records.ToDataSourceResult(request, ModelState));
    }

}

 

 

Client Code:

function goodbye(e) {
    var minimumsGrid = $('#MinimumsGrid').data().kendoGrid;
    if (minimumsGrid.dataSource.hasChanges()
    ) {
        LeavingUnsavedNotify(e);
    }
}

window.onbeforeunload = goodbye;


@(Html.Kendo().Grid<WholesaleWeb.Models.MinimumsViewModel>(Model.minimums)
                                                .Name("MinimumsGrid")
                                                .Columns(columns =>
                                                {
                                                    columns.Command(command => command.Destroy()).Width(90);
                                                    columns.ForeignKey(x => x.timeUnitID, Model.minimumsTimeUnits, "Key", "Value").Title("Time Unit").Width(100);
                                                    columns.ForeignKey(x => x.qtyTypeID, Model.minimumsQtyTypes, "Key", "Value").EditorTemplateName("MinimumsQuantityType").Title("Qty Type").Width(100);
                                                    columns.ForeignKey(x => x.unitID, Model.minimumsByTypes, "Key", "Value").EditorTemplateName("MinimumsBy").Title("By").Width(100);
                                                    columns.Bound(x => x.minDollarAmt).EditorTemplateName("PositiveNumber").Title("Min").Width(80);
                                                    columns.Bound(x => x.feePerExam).EditorTemplateName("PositiveNumber").Title("Fee Per Exam").Width(120).Editable("feePerExamEditable");
                                                })
                                                .Editable(editable => editable.Mode(GridEditMode.InCell))

                                                .Pageable()
                                                .Navigatable()
                                                .Reorderable(reorder => reorder.Columns(true))
                                                .Sortable()
                                                .Scrollable()
                                                .Editable(editable => editable.DisplayDeleteConfirmation(true))
                                                .Resizable(resize => resize.Columns(true))

                                                .ToolBar(toolbar =>
                                                {
                                                    toolbar.Create();
                                                })

                                                .DataSource(dataSource => dataSource
                                                    .Ajax()
                                                    .Batch(true)
                                                    .PageSize(10)
                                                    .ServerOperation(false)
                                                    .Events(events => events.Error("error_handler").RequestEnd("MinimumRates_End"))
                                                    .Model(model =>
                                                    {
                                                        model.Id(x => x.id);
                                                    })
                                                    .Create(create => create.Action("Minimum_Create", "Wholesale").Data("getGlobalContractID"))
                                                    .Update(update => update.Action("Minimum_Update", "Wholesale").Data("getGlobalContractID"))
                                                    .Destroy(destroy => destroy.Action("Minimum_Destroy", "Wholesale").Data("getGlobalContractID"))
                                                )
                                                .HtmlAttributes(new { style = "width:100%" })
                                )

[Viktor Tachev]

Hello Matt,

I tried to replicate the behavior with the online examples, however, I was not able to. Please check out the short video below for reference:

• https://www.screencast.com/t/flErar56AP

With that said, in the code snippets I noticed that the Model is passed directly to the Grid. At the same time the widget is configured to use Ajax binding. Such configuration can result in unexpected behavior. Please update the Grid configuration to include a Read action like in the example below and let me know how the behavior changes. 

• https://demos.telerik.com/aspnet-mvc/grid/editing

In case the issue persists please send us a runnable sample where the behavior is replicated. This will enable us to examine the behavior locally and look for its cause. 


Regards,
Viktor Tachev
Progress Telerik

[Matt]

I have narrowed down the issue.  The example on Telerik's site uses the built in save changes toolbar button.

In my scenario, I am saving the changes outside of the grid, like this:

 

                        var grid = $("#MinimumsGrid").data("kendoGrid");
                        if (grid.dataSource.hasChanges()) {
                            grid.saveChanges();
                        }

 

This seems to work on the telerik site demo though, when testing through the debugger.

[Matt]

It appears to have something to do with the fact that I am redirecting before the grid has had a chance to update itself.  When in the RequestEnd javascript function I can query hasChanges, and it returns TRUE.  It returns FALSE if I don't redirect, and query later on in the console window.  Is there a way I can have an event notification when the grid is done updating itself or something?

Thanks,

Matt

[Viktor Tachev]

Hi Matt,

When an operation in a Grid has finished the dataBound event will be raised. If you would like to redirect the page you can use that event as it will be triggered after the save operation has finished. 


Regards,
Viktor Tachev
Progress Telerik