RadAsyncUpload & Modal jQuery UI dialog

8 posts, 0 answers
  1. Matthias
    Matthias avatar
    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> 
  2. Genady Sergeev
    Admin
    Genady Sergeev avatar
    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.
  3. Juan
    Juan avatar
    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...
  4. Genady Sergeev
    Admin
    Genady Sergeev avatar
    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.
  5. Juan
    Juan avatar
    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>

     
  6. Benjamin
    Benjamin avatar
    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

  7. Benjamin
    Benjamin avatar
    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

  8. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    467 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.
Back to Top