This is a migrated thread and some comments may be shown as answers.

Kendo UI Upload inside jQuery dialog asp.net MVC4

5 Answers 99 Views
Upload
This is a migrated thread and some comments may be shown as answers.
Mark Mergler
Top achievements
Rank 1
Mark Mergler asked on 10 Apr 2013, 12:02 PM
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.

5 Answers, 1 is accepted

Sort by
0
Mark Mergler
Top achievements
Rank 1
answered on 10 Apr 2013, 04:39 PM
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..
0
Vladimir Iliev
Telerik team
answered on 12 Apr 2013, 08:01 AM
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!
0
Mark Mergler
Top achievements
Rank 1
answered on 15 Apr 2013, 10:51 AM
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.


0
Kamal
Top achievements
Rank 1
answered on 21 Jul 2015, 01:28 PM

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?

0
Vladimir Iliev
Telerik team
answered on 23 Jul 2015, 01:43 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Upload
Asked by
Mark Mergler
Top achievements
Rank 1
Answers by
Mark Mergler
Top achievements
Rank 1
Vladimir Iliev
Telerik team
Kamal
Top achievements
Rank 1
Share this question
or