Kendo UI Upload inside jQuery dialog MVC4

6 posts, 0 answers
  1. Mark Mergler
    Mark Mergler avatar
    10 posts
    Member since:
    Feb 2010

    Posted 10 Apr 2013 Link to this post


    Using 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.


    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);
    01.@model MvcWebRole1.Models.Question
    03.    ViewBag.Title = "EditQuestion";
    05.@using (Html.BeginForm())
    07.    @Html.AntiForgeryToken()
    08.    @Html.ValidationSummary(true)
    09.    @Html.HiddenFor(model => model.QuestionID)
    10.    @Html.HiddenFor(model => model.ID)
    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>
    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>
    39.    <script>
    40.        function onSuccess(e) {
    41.            var Response = e.response;
    42.            $("#QuestionMediaUrl").val(;
    43.        }
    44.    </script>
    45.    <p>
    46.        <hr />
    47.        <input type="submit" value="Save & Return" />
    48.    </p>
    51.@section Scripts {
    52.    @Scripts.Render("~/bundles/jqueryval")
    55.<div id="dialog" title="Title"></div>
    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.    });


    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.

  2. Mark Mergler
    Mark Mergler avatar
    10 posts
    Member since:
    Feb 2010

    Posted 10 Apr 2013 Link to this post

    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..
  3. Vladimir Iliev
    Vladimir Iliev avatar
    2155 posts

    Posted 12 Apr 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  4. Mark Mergler
    Mark Mergler avatar
    10 posts
    Member since:
    Feb 2010

    Posted 15 Apr 2013 Link to this post

    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.


  5. Kamal
    Kamal avatar
    3 posts
    Member since:
    Nov 2014

    Posted 21 Jul 2015 Link to this post

    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?

  6. Vladimir Iliev
    Vladimir Iliev avatar
    2155 posts

    Posted 23 Jul 2015 Link to this post

    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?

    Vladimir Iliev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top