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

Upload widget inside jQueryUI dialog box problems

1 Answer 166 Views
Upload
This is a migrated thread and some comments may be shown as answers.
Pierre
Top achievements
Rank 1
Pierre asked on 19 Apr 2013, 09:40 AM
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

1 Answer, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 22 Apr 2013, 02:02 PM
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!
Tags
Upload
Asked by
Pierre
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or