Kendo functions stops working after event.stopImmediatePropagation

Question

I want to send a HttpPostedFileBase to my controller using Ajax.BeginForm.

Because I'm using Ajax I need to tweak my request in order for it to work, (file is otherwise null).

The problem I'm facing is that the kendo functions (multi-selects, file-inputs), in my form, doesn't reload/stops working after the content is reloaded with ajax. The script that cause this problem is using

e.stopImmediatePropagation();

which stops all kendo functions for some reason, (no javascript expert here).

MultiSelect View:

@(Html.Kendo().MultiSelectFor(x => x.ProductModel.AddProductSubCategories)
                              .Name("ProductModel.AddProductSubCategories")
                      .HtmlAttributes(new { @class = "multi-select" })
                                                      .DataTextField("SubCategoryName")
                                                      .DataValueField("SubCategoryID")
            )

Script:

window.addEventListener("submit", function (e) {
        var form = e.target;
        alert($(form).attr('id'));
        if (form.getAttribute("enctype") === "multipart/form-data") {
            if (form.dataset.ajax && $(form).valid()) {
                e.preventDefault();
                e.stopImmediatePropagation();
                $('.admin-add-product-message-container').remove();
                AjaxLoadUp();
                var xhr = new XMLHttpRequest();
                xhr.open(form.method, form.action);
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        if (form.dataset.ajaxUpdate) {
                            var updateTarget = document.querySelector(form.dataset.ajaxUpdate);
                            if (updateTarget) {
                                updateTarget.innerHTML = xhr.responseText;
                            }
                        }
                    }
                };
                xhr.send(new FormData(form));
            }
        }
    }, true);

I have tried reloading Kendo script using

$.getScript("myscript");

inside the if (updateTarget) but that doesn't solve my problem.

Any suggestions? Thanks

Answer 1

Answer taken from official kendo forums:

The widgets will stop working because the scripts will not be evaluated when the response is set to the innerHTML property. You can use the jQuery html method to set the response in order to avoid the problem e.g.

if (updateTarget) {
   $(updateTarget).html(xhr.responseText);
}