Search code examples
asp.net-mvc-4kendo-asp.net-mvckendo-editor

kendo editor not responding after multiple requests to the same page in IE


I have a very weird bug. I have a page on MVC that displays two editors and gets passed a model with the value for both editors. The model is as follows:

public class BulletinsModel
    {
        [AllowHtml]
        [Display(Name = "Some Bulletin")]
        public string SomeBulletin { get; set; }

        [AllowHtml]
        [Display(Name = "Other Bulletin")]
        public string OtherBulletin { get; set; }
    }

I then, defined a view which receives this view model and maps it to two kendo editors.There is also some javascript code to make a post to update the information.

@model BulletinsModel

<div id="settings">
    <div class="form-horizontal">
        <div class="form-group">
            @Html.LabelFor(m => m.SomeBulletin, new { @class = "col-md-6 text-left" })
            @(Html.Kendo().EditorFor(m => m.SomeBulletin).Encode(false).Name("Some_Bulletin"))

            @Html.LabelFor(m => m.OtherBulletin, new { @class = "col-md-6 text-left" })
            @(Html.Kendo().EditorFor(m => m.OtherBulletin).Encode(false).Name("Other_Bulletin"))
        </div>      
    </div>
</div>

My code for my action method that renders this view is as follows (nothing fancy):

[HttpGet]
public PartialViewResult Index()
{
    ViewBag.ActiveSectionName = "Bulletins";
    var bulletinModel = GetBulletinsModel();
    return PartialView("_Bulletins",bulletinModel);          
}

However, my issue is that after hitting the Index action a couple of times, the editors become non responsive and I cannot edit the information on them. This only happens on IE, as I have not been able to replicate the issue in other browsers.

EDIT: I have just noticed that the editor is frozen. In order to be able to edit what's inside of the editor I need to click on any option of the toolbar to make it responsive once again. Why is that?


Solution

  • Turns out that the issue is happening with IE as detailed in this post: Adding, removing, adding editor -> all editors on page become read only in IE. The problem is with the iframes inside the editor. I was loading my page with an Ajax request to which I had to add the following code before making the request to make it work.

        function unloadEditor($editor) {
            if ($editor.length > 0) {
                $editor.data('kendoEditor').wrapper.find("iframe").remove();
                $editor.data('kendoEditor').destroy();
            }
        }
        unloadEditor($('#myEditor'));