Upload widget inside jQueryUI dialog box problems

2 posts, 0 answers
  1. Pierre
    Pierre avatar
    28 posts
    Member since:
    Jun 2012

    Posted 19 Apr 2013 Link to this post

    Hi,

    I have 2 problems with the code bellow. 

    1) If I don't set the z-index in the CSS below, the "Select..." button does not do anything when clicked on.  With the CSS in place the click event works until I upload something, after which it no longer respond.  I'd have to reload the page to get it to work again.  Drag/drop files to the drop zone works fine and the files are uploaded properly.

    2) When uploading, instead of uploading each file once, it uploads each file it at least 4 times (see attached image).

    HTML:
    <div id="dlgUpload" style="display:none">
        <p><span class="ui-icon ui-icon-info" style="float: left; margin: 0 7px 20px 0;"></span>Photo Upload</p>
        <div style="width:100%;max-height:300px;">       
            @(Html.Kendo().Upload()
                .Name("fileUpload")
                .Async(a => a
                    .Save("Save", "Upload")
                    .Remove("Remove", "Upload")
                    .AutoUpload(true)
                )
                .Events(e => e
                    .Upload(@<text>
                    function(e) {   
                     e.data = { jobNumber: $("#Customer_Number").val(), mode:"photos" };
                    }
                  </text>)
                    .Remove(@<text>
                    function(e) {   
                     e.data = { jobNumber: $("#Customer_Number").val(), mode:"photos" };
                    }
                  </text>)
                )
            )
        </div>
    </div>
    function uploadPhotos(customerId) {
        $("#dlgUpload").dialog({
            autoOpen: false,
            resizable: false,
            draggable: true,
            modal: true,
            width: 470,
            title: "Upload Photos for Customer " + customerId,
            buttons: {
                "Close": function () {
                    $(this).dialog("close");
                }
            },
        });
        $('#dlgUpload').dialog('open');
    }
    funtion uploadPhotos is called by buttons on a kendoGrid.

    CSS:
    .ui-dialog .k-upload-button  input
    {
        z-index:auto !important;
    }
    When I take the upload widget out of the dialogbox everything works fine.

    Update:
    I seem to remember something about the widget being initialize twice when running inside a dialog box!
    If you look at the second image, notice there are 2 drop zones (1 in red and 1 in yellow.)  When dropping on the red zone the file uploads 4 times, on the yellow zone it uploads 8 times!

    Help!!

    Thanks,
    PT
  2. Dimo
    Admin
    Dimo avatar
    8331 posts

    Posted 22 Apr 2013 Link to this post

    Hello Pierre,

    Generally, we do not support the Upload widget inside a jQuery dialog, because of the observed problems, which are caused by the dialog. I recommend you to use the Kendo UI Window instead.

    If you prefer using the jQuery dialog, then create the dialog first, and then initialize the Kendo UI Upload client-side.


    Regards,

    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top