Telerik Forums / UI for ASP.NET AJAX Forum / AsyncUpload /

RadAsyncUpload & Modal jQuery UI dialog

Telerik UI for ASP.NET AJAX
Resources Buy Try

8 posts, 0 answers

Matthias

3 posts

Member since:
Nov 2008

Posted 28 Apr 2010 Link to this post

Is there a way to get the RadAsyncUpload work in a modal jQuery ui dialog?

~ Matt

    
                <script type="text/javascript">  
        
                    $(document).ready(function () {  
        
                        $("#uploadImageDialog").dialog({  
        
                            autoOpen: false, modal: false, resizable: false, height: 200, width: 450,  
        
                            title: 'Bild hochladen'  
        
                        });  
        
                        $('#uploadImageDialogOpener').click(function () {  
        
                            $("#uploadImageDialog").dialog('open');  
        
                        });  
        
                    });  
        
                </script>

    
                <div id="uploadImageDialog" style="width: auto;">  
        
                    <telerik:RadAsyncUpload ID="RadAsyncUpload1" runat="server" AllowedFileExtensions="jpg" 
        
                                        ControlObjectsVisibility="None" Culture="German" EnableFileInputSkinning="False" 
        
                                        MaxFileInputsCount="10"  AutoAddFileInputs="False">  
        
                                        <Localization Remove="Entfernen" Select="Auswählen" /> 
        
                                    </telerik:RadAsyncUpload> 
        
                </div>

Genady Sergeev
Admin

1600 posts
Posted 03 May 2010 Link to this post

Hi Matthias,

The jQuery dialog is hardly compatible with any upload control because it moves the dialog's content outside of the form tag. However, the <input type="file" /> tag on which is based RadUpload requires to be inside a form tag to operate properly. The issue is reported to the jQuery developers as a bug. More information can be found here.

The good news are that after some playing with the dialog we have managed to make it work with RadAsyncUpload. I have prepared sample project that demonstrates the approach. You can find it as an attachment. However, have in mind that the workaround uses hacks in order to work.

Best wishes,
Genady Sergeev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

uploadinsidejqueryddialog.zip
Juan

3 posts

Member since:
Nov 2010

Posted 19 Nov 2010 Link to this post

I tried the solution from the previous post and it works. But after a post back the problem came back again...
Genady Sergeev
Admin

1600 posts

Posted 25 Nov 2010 Link to this post

Hi Juan,

I am not able to reproduce the issue on a sample project. Which version have you tested with? What steps should I undertake in order to reproduce the problem? I've tried opening the dialog, posting the page back and then opening the dialog once again. The select button worked as expected.

Kind regards,
Genady Sergeev
the Telerik team

Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Juan

3 posts

Member since:
Nov 2010

Posted 25 Nov 2010 Link to this post

Hi Kind

You are right, I was using 2009 dll files. With the new dll works perfectly...thanks for the response...

I'm using the jquery with the radupload and progress manager like this...this is just to help anyone with this scenario.

This in the head

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

This in the body

<asp:ScriptManager ID="smMain" runat="server">

   <Scripts>

   <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

   <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

   <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

   </Scripts>

   </asp:ScriptManager>

<asp:ScriptManager ID="smMain" runat="server">

   <Scripts>

   <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

   <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

   <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

   </Scripts>

   </asp:ScriptManager>

<asp:ScriptManager ID="smMain" runat="server">

   <Scripts>

   <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

   <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

   <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

   </Scripts>

   </asp:ScriptManager>

<asp:ScriptManager ID="smMain" runat="server">

           <Scripts>

                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

            </Scripts>

      </asp:ScriptManager>

In this script the setup info dialog function appends the content of #Fotos div to the form. This is important in order to make the upload and in this case Im showing a rad progress ares in the jquery dialog. The rad progress area requires to be in the form.

   <script type="text/javascript">

             Telerik.Web.UI.RadUpload.prototype._updateFormProperties = function (form) {

                 if (form) {

                     form.enctype = form.encoding = "multipart/form-data";

                 }

             }

        $(document).ready(function() {

            //setup info dialog

             $('#Fotos').dialog({

                    autoOpen: false,

                    draggable: false,

                    width: 400,

                    height: 340,

                    modal: false,

                    title: "Editar Foto",

                    open: function(type, data) {

                        $(this).parent().appendTo("form");

                    }

                });

        });

        function showDialog(id)

        {

            $('#' + id).dialog("open");

        }

        function closeDialog(id) {

            $('#' + id).dialog("close");

        }

</script>

Then this in the form outside the Fotos div
<telerik:radprogressmanager runat="server"></telerik:radprogressmanager>

And then the Fotos div with the rad upload control and the progress area, this is the content that the jquery dialog will show.

<div id="Fotos">



  <input id="FotoID" runat="server" type="hidden"/>

  <Telerik:radupload id="TelerikFile" runat="server" Culture="(Default)" CssClass="space3"

   MaxFileInputsCount="1" MaxFileSize="10485760" Width="350px"

   AllowedFileExtensions=".jpg,.jpeg" ControlObjectsVisibility="ClearButtons"

   Skin="Outlook" Height="24px">

   <localization clear="Limpiar" select="Seleccione" />

   </Telerik:radupload>

  <asp:Button runat="server" CssClass="ui-state-default ui-corner-all space5" Text="Subir/Upload" ToolTip="Subir foto" OnClick="btnUpload_Click" />



   <Telerik:radprogressarea runat="server" DisplayCancelButton="True"

   ProgressIndicators="TotalProgressBar, TotalProgress, RequestSize, CurrentFileName, TimeElapsed, TimeEstimated, TransferSpeed"

   Skin="Default" Width="350px">

   <Localization Uploaded="Subidos" cancel="Cancelar" currentfilename="Subiendo foto: "

   elapsedtime="Tiempo transcurrido:" estimatedtime="Tiempo restante estimado:"

   totalfiles="Total de archivos: " transferspeed="Velocidad"

   uploadedfiles="Archivos subidos: "></Localization>

   </Telerik:radprogressarea>

   </div>

<div id="Fotos">



<input id="FotoID" runat="server" type="hidden"/>

<Telerik:radupload id="TelerikFile" runat="server" Culture="(Default)" CssClass="space3"

                           MaxFileInputsCount="1" MaxFileSize="10485760" Width="350px"

                           AllowedFileExtensions=".jpg,.jpeg" ControlObjectsVisibility="ClearButtons"

                           Skin="Outlook" Height="24px">

                           <localization clear="Limpiar" select="Seleccione" />

                       </Telerik:radupload>

<asp:Button runat="server" CssClass="ui-state-default ui-corner-all space5" Text="Subir/Upload" ToolTip="Subir foto" OnClick="btnUpload_Click" />



   <Telerik:radprogressarea runat="server" DisplayCancelButton="True"

       ProgressIndicators="TotalProgressBar, TotalProgress, RequestSize, CurrentFileName, TimeElapsed, TimeEstimated, TransferSpeed"

       Skin="Default" Width="350px">

       <Localization Uploaded="Subidos" cancel="Cancelar" currentfilename="Subiendo foto: "

           elapsedtime="Tiempo transcurrido:" estimatedtime="Tiempo restante estimado:"

           totalfiles="Total de archivos: " transferspeed="Velocidad"

           uploadedfiles="Archivos subidos: "></Localization>

   </Telerik:radprogressarea>

  </div>

After this all you need is a call to the open function in the javascript with the div id

Hope this can help to anyone trying this. Some words are in spanish Im from Puerto Rico and my english is not perfect.

Thanks for the help Kind

<asp:ScriptManager ID="smMain" runat="server">

   <Scripts>

   <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

   <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

   <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

   </Scripts>

   </asp:ScriptManager>

<asp:ScriptManager ID="smMain" runat="server">

   <Scripts>

   <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

   <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

   <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

   </Scripts>

   </asp:ScriptManager>

<asp:ScriptManager ID="smMain" runat="server">

   <Scripts>

   <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

   <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

   <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

   </Scripts>

   </asp:ScriptManager>

<asp:ScriptManager ID="smMain" runat="server">

   <Scripts>

   <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

   <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

   <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

   </Scripts>


W </asp:ScriptManager>
Benjamin

61 posts

Member since:
Jul 2016

Posted 17 Jan Link to this post

Hi. i encounter simpler issue.. but when i copy the above code in, my jquery datetimepicker broke.

for my case my code is part of Sharepoint 2013 Custom Webpart. thus my script manager is in the master page

or is there a better workaround for this so that i am able to make jquery modal to work properly with radasyncupload?

need urgent help on this.

thanks
Benjamin

61 posts

Member since:
Jul 2016

Posted 17 Jan in reply to Benjamin Link to this post

Benjamin said:
Hi. i encounter simpler issue.. but when i copy the above code in, my jquery datetimepicker broke.

for my case my code is part of Sharepoint 2013 Custom Webpart. thus my script manager is in the master page

or is there a better workaround for this so that i am able to make jquery modal to work properly with radasyncupload?

need urgent help on this.

thanks

there is a typo.

*similar
Veselin Tsvetanov
Admin

563 posts

Posted 19 Jan Link to this post

Hello Benjamin,

As my colleague Genady mentioned, the suggested workaround has some hacks in it and it may not work correctly with more recent versions of jQuery UI and / or RadAsyncUpload.

In case you need consulting and development assistance with integration of the Telerik ASP.NET AJAX suite with third-party libraries, I could suggest you our Professional services team. Let me know if you are interested in cooperating with our colleagues on this task and I will arrange someone to contact you directly.

Regards,
Veselin Tsvetanov
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

RadAsyncUpload & Modal jQuery UI dialog

Matthias

Genady Sergeev

Juan

Genady Sergeev

Juan

Benjamin

Benjamin

Veselin Tsvetanov