This is a migrated thread and some comments may be shown as answers.

hasChanges not working in IE

4 Answers 134 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Matt
Top achievements
Rank 1
Matt asked on 04 Feb 2019, 06:39 PM

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%" })
                                )

 

4 Answers, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 06 Feb 2019, 01:26 PM
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:


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. 


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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Matt
Top achievements
Rank 1
answered on 06 Feb 2019, 05:53 PM

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.

0
Matt
Top achievements
Rank 1
answered on 06 Feb 2019, 06:07 PM

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

0
Accepted
Viktor Tachev
Telerik team
answered on 07 Feb 2019, 10:37 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Matt
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Matt
Top achievements
Rank 1
Share this question
or