RequestEnd event not firing in IE 11

[Joseph]

I have an application that includes a Grid with a DataSource that has a method attached to the RequestEnd event (code below). This works perfectly with Chrome, Firefox, and Edge. However, the RequestEnd event is never raised when IE 11 is used. Why is this and how can it be resolved?

@(Html.Kendo().Grid<MVCTimesheetApplication.Models.Timesheet>()
           .Name("timesheetGrid")
           .TableHtmlAttributes(new { style = "table-layout: fixed; " })
            .Columns(columns =>
            {
                 // columns set up here...
            })
            .Navigatable()
            .Editable(editable =>
            {
                editable.DisplayDeleteConfirmation(false);
                editable.Mode(GridEditMode.InCell);
            })
            .DataSource(dataSource => dataSource
                .Ajax()
                .Aggregates(aggregates =>
                {
                    //aggregates configured here...
                })
                .Batch(true)
                .ServerOperation(false)
                .Events(events => events.Error("timesheetGrid_error_handler"))
                .Events(events => events.Change("timesheetGrid_change"))
                .Events(events => events.RequestEnd("timesheetGrid_requestEnd"))
                .Model(model => model.Id(t => t.rowId))
                .Create(create => create.Action("Index_Create", "Home").Data("getCreateParams"))
                .Destroy(destroy => destroy.Action("Index_Delete", "Home").Data("getUpdateParams"))
                .Read(read => read.Action("Index_Read", "Home").Data("getReadParams"))
                .Update(update => update.Action("Index_Update", "Home").Data("getUpdateParams")
          )
        )
        .Events(events => events.DataBound("timesheetGrid_databound"))
    )

 

Thanks

 

[Joseph]

To further clarify, the RequestEnd does not get raised when changes have been made to the grid itself and is submitted back to the server. When navigating to the page itself initially or refreshing the page, it does get raised.

[Marin Bratanov]

Hello Joseph,

I tried this on the following demo: http://demos.telerik.com/aspnet-mvc/grid/editing. I am attaching here a short video from my test so you can confirm if I am missing something, because it appears to be working fine for me.

Could you also check the following:

• Is IE in Compatibility Mode? It must be in standards (edge) mode for proper operation of the widgets.
• Is your Telerik UI for ASP.NET MVC version the latest (2016.3.1118 at the moment) and if not - does upgrading to it help?
• Are there any JS errors on the page? Other errors may be preventing this code from running.

Regards,

Marin Bratanov
Telerik by Progress

[Joseph]

Hi Marin,

I mistyped exactly the circumstances where this is happening. If you open the page with the grid and make NO changes on the grid itself and then click Submit, that is when the event is never raised. Make a change to a cell and clicking Submit causes the page to work correctly. It is in edge mode. We using version 2016.1.226.545, but can upgrade. And there are no JS errors on the page.

 

[Joseph]

Also, what is the best way to upgrade this to the latest version? Will I need to make any changes to my project in Visual Studio?

[Marin Bratanov]

Hello Joseph,

How do you submit the grid data when no changes have been made? Does the response include the grid and its data? If not, and the grid remains in the browser, there is no reason for it to dispose and/or request data again and thus for the event to fire.

If you want to refresh the grid, you can call the .read() method of the DataSource, which will invoke a new request for data: http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-read.

I tried the following in the grid/editing demo and it worked fine for me, because the grid is also included in the response, so it is re-created and thus, it requests data anew:

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
    .Name("Grid")
    .Columns(columns => {
        columns.Bound(p => p.ProductName);
        columns.Bound(p => p.UnitPrice).Width(140);
        columns.Bound(p => p.UnitsInStock).Width(140);
        columns.Bound(p => p.Discontinued).Width(100);
        columns.Command(command => command.Destroy()).Width(110);
    })
    .ToolBar(toolbar => {
        toolbar.Create();
        toolbar.Save();
    })
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .Pageable()
    .Navigatable()
    .Sortable()
    .Scrollable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(true)
        .PageSize(20)
        .ServerOperation(false)
        .Events(events => events.Error("error_handler"))
        .Events(events => events.RequestEnd("timesheetGrid_requestEnd"))
        .Model(model => model.Id(p => p.ProductID))
        .Create("Editing_Create", "Grid")
        .Read("Editing_Read", "Grid")
        .Update("Editing_Update", "Grid")
        .Destroy("Editing_Destroy", "Grid")
    )
)

@using (@Html.BeginForm("editing", "grid", FormMethod.Post))
{
<input type="submit" value="Submit Me" />
}



<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";
                    });
                }
            });
            alert(message);
        }
    }

    function timesheetGrid_requestEnd(e) {
        alert("respone end fired");
    }
</script>

As for upgrading - perhaps the easiest way is to use the Upgrade wizard from our Visual Studio Extensions: http://docs.telerik.com/aspnet-mvc/vs-integration/upgrade-wizard. It will need to change a lot of files - all the Telerik resources (JS, stylesheets, fonts, editor templates, web.config, etc.). You can find more details on the structure and used files here: http://docs.telerik.com/aspnet-mvc/introduction#distribution-contents.

Regards,

Marin Bratanov
Telerik by Progress

[Joseph]

I have a button on the page submits it:

@(Html.Kendo().Button()
        .Name("submitTimesheet")
        .HtmlAttributes(new { type = "button", title = "Click here to submit the timesheet", style = "vertical-align: middle;float: right;" })
        .ImageUrl(Url.Content("~/Content/img/tick_16.png"))
        .Content("Submit Timesheet")
        .Events(ev => ev.Click("submitTimesheet_onClick"))
    )

 

With this code in the onClick event:

function submitTimesheet_onClick(e) {
    ShowSpinner();
    $("#tsSubmitted").val("true");
    var retCode = 0;

    if (validateData()) {
        var grid = $("#timesheetGrid").data("kendoGrid"),
            dataSource = $("#timesheetGrid").data("kendoGrid").dataSource,
            totalItems = dataSource.total();

        for (i = 0; i <= totalItems - 1; i++) {
            uid = grid.dataSource._data[i].uid;
            item = dataSource.getByUid(uid);
            item.dirty = true;
        }

        retCode = grid.saveChanges();
    }
    else
        retCode = 99999;

    var date = new Date($("#dpStartDate").data("kendoDatePicker").value());
    var lastDay = formatPayPeriodDates(new Date(date.setDate(date.getDate() - date.getDay() + 6)));

    if (retCode == 0 || retCode == undefined) {
        $.post('/Home/UpdateTimesheetStatus', { visualId: $("#empInfo_visualid").val(), lastDay: kendo.toString(lastDay, 'd'), status: "Submitted", reject_reason: "" },
            function (data) {
                $("#txtNeedToConfirm").val("false");
            }
        );
    } else if (retCode != 99999) {
        var alertWindow = $("#alertWindow").data("kendoWindow");
        document.getElementById("alertMessage").innerHTML = "There are no time entries to save.";
        alertWindow.center();
        alertWindow.open();
    }
}

 

The post to 'Home/UpdateTimesheetStatus' does work correctly. I'm not sure what you mean by "Does the response include the grid and its data?" 

Thanks

 

[Marin Bratanov]

Hi Joseph,

What I meant is illustrated in the sample I used in my previous answer - the POST action returns the entire view where the grid is declared, so, in effect, the browser disposes the old one and creates a new instance. 

The other option is that the POST query may be made to some service and the HTML of the grid may not have been included in it so it will not dispose and ResponseEnd will not fire. I am attaching a small sample I built from your snippet and from the original demo, which illustrates the expected behavior in this case. Could you review it and see how it differs from your setup? I am also adding a short video as a reference.

Regards,

Marin Bratanov
Telerik by Progress

[Joseph]

Hi Marin,

Your code and video do not differ from what I am doing. One thing that I did notice in your video is that when you are running the Developer Tools to analyze what is going on, it is in Edge mode (screenshot attached). When I run my IE 11 and launch the Developer Tools, I don't have this option...11 is the highest version showing in that dropdown for me.

But the problem that I'm still not seeing an answer to is why the RequestEnd event is raised in Chrome, Firefox, and Edge even when I do not make any changes to the grid. IE 11 is the only browser where this event is not being raised when changes are not made. Why do these browsers raise the event when no changes are made and IE 11 does not?

Thanks

 

 

[Marin Bratanov]

Hello Joseph,

It is odd that this should behave inconsistently and I am trying to reproduce the scenario in order to inspect the issue, because all browsers behave the same way for me. Before I reproduce the problem, I have no further guesses in addition to the first few.

Regards,

Marin Bratanov
Telerik by Progress

[Joseph]

Any thoughts yet as to what is causing this and how to fix?

 

[Marin Bratanov]

Hello Joseph,

As I said before - this is not a known issue and until I can reproduce it in order to investigate, I will not be able to offer further ideas on this. If you can prepare a sample based on my previous ones where I can debug this, I will be able to offer more information.

Regards,

Marin Bratanov
Telerik by Progress