Is there a way to get the RadAsyncUpload work in a modal jQuery ui dialog?
~ Matt
~ 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> |
7 Answers, 1 is accepted
0
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.
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.
0
Juan
Top achievements
Rank 1
Rank 1
answered on 19 Nov 2010, 09:10 PM
I tried the solution from the previous post and it works. But after a post back the problem came back again...
0
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
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.
0
Juan
Top achievements
Rank 1
Rank 1
answered on 26 Nov 2010, 02:52 AM
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
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.
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.
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
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>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>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
0
Benjamin
Top achievements
Rank 1
Rank 1
answered on 18 Jan 2017, 04:59 AM
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
0
Benjamin
Top achievements
Rank 1
Rank 1
answered on 18 Jan 2017, 05:50 AM
[quote]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
[/quote]
there is a typo.
*similar
0
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
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.