Kendo UI Upload inside jQuery dialog asp.net MVC4

[Mark Mergler]

Hi,

Using asp.net mvc4 razor with latest kendoUI scripts.

Kendo CDN scripts are all referenced in master layout

On a View I have a link to another view. I have wired up this link to open a jquery dialog instead. The $.get method runs the controller ActionResult which, for ajax, returns a partialview(model). This works fine. Dialog is rendered, view content shown ok. 

Issue: When the dialog is opened, the Upload widget is not rendered. Only basic html file input is rendered.

In the source, there is no kendoUI markup (I saw a previous issue surrounding z-index) only the html file input tag.

Controller/Action:

public ActionResult EditQuestion(int id = 0)
        {
            Question question = db.Questions.Find(id);
            if (question == null)
            {
                return HttpNotFound();
            }
            if (Request.IsAjaxRequest()) {
                return PartialView(question);
            }
            return View(question);
        }

View

01.@model MvcWebRole1.Models.Question
02.@{
03.    ViewBag.Title = "EditQuestion";
04.}
05.@using (Html.BeginForm())
06.{
07.    @Html.AntiForgeryToken()
08.    @Html.ValidationSummary(true)
09.    @Html.HiddenFor(model => model.QuestionID)
10.    @Html.HiddenFor(model => model.ID)
11.
12.    <div class="editor-label">
13.        @Html.LabelFor(model => model.QuestionText, "Enter the question text")
14.    </div>
15.    <div class="editor-field">
16.        @Html.EditorFor(model => model.QuestionText)
17.        @Html.ValidationMessageFor(model => model.QuestionText)
18.    </div>
19.
20.    <div class="editor-label">
21.        @Html.LabelFor(model => model.QuestionMediaUrl, "Upload Media")
22.    </div>
23.    <div class="editor-field">
24.        @(Html.Kendo().Upload()
25.            .Name("files")
26.            .Async(a => a
27.                .Save("EditGameUploadMedia", "Engage")
28.                .Remove("EditGameRemoveMedia", "Engage")
29.                .AutoUpload(true)
30.            )
31.            .Events(events => events
32.                .Success("onSuccess")
33.            )
34.        )
35.        <br />
36.        @Html.EditorFor(model => model.QuestionMediaUrl)
37.    </div>
38.
39.    <script>
40.        function onSuccess(e) {
41.            var Response = e.response;
42.            $("#QuestionMediaUrl").val(Response.st);
43.        }
44.    </script>
45.    <p>
46.        <hr />
47.        <input type="submit" value="Save & Return" />
48.    </p>
49.}
50.
51.@section Scripts {
52.    @Scripts.Render("~/bundles/jqueryval")
53.}
54.
55.<div id="dialog" title="Title"></div>
56.<script>
57.    $(document).ready(function () {
58.        $(function () {
59.            $('.modallink').click(function (e) {
60.                console.log("in");
61.                $.get($(this).prop('href'), function (response) {
62.                    $("#dialog").html(response);
63.                    $("#dialog").dialog({
64.                        height: 400,
65.                        width: 650,
66.                        modal: true,
67.                        buttons: {
68.                            Cancel: function () {
69.                                $(this).dialog("close");
70.                            }
71.                        }
72.                    });
73.                });
74.                e.preventDefault(); // don't let it continue on
75.                return false;
76.            });
77.        });
78.    });
79.</script>

screenshot:
http://prntscr.com/1007bl

If I skip the jQuery dialog and open the view completely, the Upload renders as normal. 

Thinking along the lines of the kendo scripts are not referenced in the dialog as the html input is not being kendo'd or jQueryUI is stopping it.

Any help appreciated.

Thanks.

[Mark Mergler]

Same behaviour if using Kendo UI Window widget.

If using static content e.g. input + initialiser inside window div, Kendo UI Upload displays ok

jQuery works inside the window, just not kendo widgets..

[Vladimir Iliev]

Hi Mark,

 
From the provided information it seems that you are returning View instead of PartialView from the controller which can be the reason for this behavior, however for convenience I created small test project of loading Upload widget from partial view inside Kendo Window - could you please check it and let me know how it differs from your real setup?

Kind Regards,
Vladimir Iliev
the Telerik team

[Mark Mergler]

Thanks  Vladimir for the example proj.

I observed the same issue when using either view or partial view. However, I also discovered the problem. Your example was OK inside my project - the only difference was the widget "name" (ID).

The upload widget inside the window widget had the same "name" as another on the main view - so a conflict. That's all it was.

Thanks.

[Kamal]

I am trying to use a Kendo Upload inside a a Kendo window in VS 2015RC, mvc runtime v4.0.30319 and kendo mvc runtime v4.0.30319.

Everything render's fine ​but when i post it to my controller. the file object is always empty. Same code for Kendo Upload works fine outside the Kendo Window. Is this a know issue?

[Vladimir Iliev]

Hi Kamal,

Did you try the suggested setup from my last reply? If you still experience the described behavior could you please modify the example from my last reply to reproduce the issue  and send it back to us?

Regards,
Vladimir Iliev
Telerik