I have a RadUpload control on my page, starting as not visible ("Visible=false") and displaying after an AJAX call. The first time I show it, everything works how I would expect. But, after I show it and then make a postback call, if I show it again, it doesn't look or function like the RadUpload should. It looks like the base elements for the RadUpload control, but without styling or function, although a HTML input type="file" control follows my mouse when I hover over the RadUpload area.
The following code should demonstrate the issue:
The following code should demonstrate the issue:
<%@ Page AutoEventWireup="true" Language="C#" %><script runat="server"> protected void Page_Load(object sender, EventArgs e) { AjaxPanel.AjaxRequest += new RadAjaxControl.AjaxRequestDelegate(AjaxPanel_AjaxRequest); } void AjaxPanel_AjaxRequest(object sender, AjaxRequestEventArgs e) { var args = e.Argument.Split(','); switch (args[0].ToUpper()) { case "SHOWFILE": FilePicker.Visible = true; break; } } void Upload_Click(object sender, EventArgs e) { FilePicker.Visible = false; } void FilePicker_Show(object sender, EventArgs e) { FilePicker.Visible = true; }</script><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Test Upload</title></head><body><form runat="server"><asp:ScriptManager runat="server" /><telerik:RadAjaxPanel ID="AjaxPanel" runat="server" EnableAJAX="true"><telerik:RadScriptBlock ID="RadScriptBlock2" runat="server"><script language="javascript" type="text/javascript"> function ShowFilePicker(idAjax) { try { $find(idAjax).ajaxRequest("SHOWFILE"); } catch(e) { } return false; }</script></telerik:RadScriptBlock><asp:PlaceHolder ID="FileSection" runat="server"> <telerik:RadUpload ID="FilePicker" runat="server" ControlObjectsVisibility="None" Visible="false" /> <asp:Button Text="Upload" runat="server" OnClick="Upload_Click" /></asp:PlaceHolder><asp:PlaceHolder runat="server"> <a href="#" onclick='return ShowFilePicker("<%= AjaxPanel.ClientID %>");'>Show Picker</a></asp:PlaceHolder></telerik:RadAjaxPanel></form></body></html>9 Answers, 1 is accepted
0
Kevin
Top achievements
Rank 2
Rank 2
answered on 05 Jul 2011, 01:57 PM
Hello Jay,
From you explanation, I'm assuming it's not styling the control correctly after the second ajax request. In your AjaxPanel_AjaxRequest event, try adding this line before the break statement:
From you explanation, I'm assuming it's not styling the control correctly after the second ajax request. In your AjaxPanel_AjaxRequest event, try adding this line before the break statement:
RadStyleSheetManager.GetCurrent(Page).RegisterSkinnableControl(FilePicker)
Hopefully, that will fix the skinning issue.
0
Jay
Top achievements
Rank 1
Rank 1
answered on 05 Jul 2011, 06:01 PM
I added that line in the AjaxPanel_AjaxRequest function, but it causes the FilePicker object not to show at all.
0
Hello Jay,
As you have noticed RadUpload control is using a standard input type="file" control. Unfortunately it is not possible to upload files with an ajax request when using the standard RadUpload. This is just a limitation of the XMLHttpRequest object used for performing an asynchronous requests to the server.
Greetings,
Peter Filipov
the Telerik team
As you have noticed RadUpload control is using a standard input type="file" control. Unfortunately it is not possible to upload files with an ajax request when using the standard RadUpload. This is just a limitation of the XMLHttpRequest object used for performing an asynchronous requests to the server.
Greetings,
Peter Filipov
the Telerik team
Browse the vast support resources we have to jump start 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
Jay
Top achievements
Rank 1
Rank 1
answered on 25 Jul 2011, 09:11 PM
From the Reference Guide, I added a postback intercept in the RadAjaxPanel:
This still causes display issues with the Upload control after one postback.
<telerik:RadAjaxPanel ID="AjaxPanel" runat="server" EnableAJAX="true" ClientEvents-OnRequestStart="conditionalPostback"><telerik:RadScriptBlock ID="RadScriptBlock2" runat="server"><script language="javascript" type="text/javascript"> function ShowFilePicker(idAjax) { try { $find(idAjax).ajaxRequest("SHOWFILE"); } catch(e) { alert(e); } return false; } // We have to do a full postback to support file uploads function conditionalPostback(sender, args) { if(args.get_eventTarget() == "<%= FileUpload.UniqueID %>") args.set_enableAjax(false); }</script></telerik:RadScriptBlock>This still causes display issues with the Upload control after one postback.
0
Hello Jay,
Please review the attached project. It implements the scenario from the Reference Guide. When a button is clicked in the RadAjaxPanel an ajax postback is fired. conditionalPostback method disable the ajax postback and a normal postback is triggered.
All the best,
Peter Filipov
the Telerik team
Please review the attached project. It implements the scenario from the Reference Guide. When a button is clicked in the RadAjaxPanel an ajax postback is fired. conditionalPostback method disable the ajax postback and a normal postback is triggered.
All the best,
Peter Filipov
the Telerik team
Browse the vast support resources we have to jump start 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
Jay
Top achievements
Rank 1
Rank 1
answered on 27 Jul 2011, 06:04 PM
Yes, I only provided a snippet of my code, but I've implemented the postback intercept successfully. I still have the issue with the RadUpload control not displaying properly after the postback.
<%@ Page AutoEventWireup="true" Language="C#" %><script runat="server"> protected void Page_Load(object sender, EventArgs e) { AjaxPanel.AjaxRequest += new RadAjaxControl.AjaxRequestDelegate(AjaxPanel_AjaxRequest); } void AjaxPanel_AjaxRequest(object sender, AjaxRequestEventArgs e) { switch (e.Argument.ToUpper()) { case "SHOWFILE": FilePicker.Visible = true; break; } } void Upload_Click(object sender, EventArgs e) { FilePicker.Visible = false; }</script><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Test Upload</title></head><body><form runat="server"><asp:ScriptManager runat="server" /><telerik:RadAjaxPanel ID="AjaxPanel" runat="server" EnableAJAX="true" ClientEvents-OnRequestStart="conditionalPostback"><telerik:RadScriptBlock ID="RadScriptBlock2" runat="server"><script language="javascript" type="text/javascript"> function ShowFilePicker(idAjax) { try { $find(idAjax).ajaxRequest("SHOWFILE"); } catch(e) { alert(e); } return false; } // We have to do a full postback to support file uploads function conditionalPostback(sender, args) { if(args.get_eventTarget() == "<%= FileUpload.UniqueID %>") args.set_enableAjax(false); }</script></telerik:RadScriptBlock><asp:PlaceHolder ID="FileSection" runat="server"> <telerik:RadUpload ID="FilePicker" runat="server" ControlObjectsVisibility="None" Visible="false" /> <asp:Button Text="Upload" runat="server" OnClick="Upload_Click" ID="FileUpload" /></asp:PlaceHolder><asp:PlaceHolder runat="server"> <a href="#" onclick='return ShowFilePicker("<%= AjaxPanel.ClientID %>");'>Show Picker</a></asp:PlaceHolder></telerik:RadAjaxPanel></form></body></html>0
Jay
Top achievements
Rank 1
Rank 1
answered on 27 Jul 2011, 06:20 PM
To reproduce the issue, click "Show Picker", then "Upload" (no need to select a file to upload). After the postback completes, click "Show Picker" again to see the error.
0
Hi Jay,
I was able to reproduce your issue. Please add the RadStyleSheetManager on your page. Here is the sample code:
Regards,
Peter Filipov
the Telerik team
I was able to reproduce your issue. Please add the RadStyleSheetManager on your page. Here is the sample code:
<asp:ScriptManager ID="ScriptManager1" runat="server" />//add stylesheetmanager to resolve the CSS issue <telerik:RadStyleSheetManager runat="server"> </telerik:RadStyleSheetManager> <telerik:RadAjaxPanel ID="AjaxPanel" runat="server" EnableAJAX="true" ClientEvents-OnRequestStart="conditionalPostback"> <telerik:RadScriptBlock ID="RadScriptBlock2" runat="server"> <script language="javascript" type="text/javascript"> function ShowFilePicker(idAjax) { try { $find(idAjax).ajaxRequest("SHOWFILE"); } catch (e) { alert(e); } return false; } // We have to do a full postback to support file uploads function conditionalPostback(sender, args) { if (args.get_eventTarget() == "<%= FileUpload.UniqueID %>") args.set_enableAjax(false); } </script> </telerik:RadScriptBlock> <asp:PlaceHolder ID="FileSection" runat="server"> <telerik:RadUpload ID="FilePicker" runat="server" ControlObjectsVisibility="None" Visible="false" /> <asp:Button Text="Upload" runat="server" ID="FileUpload" /> </asp:PlaceHolder> <asp:PlaceHolder ID="PlaceHolder1" runat="server"><a href="#" onclick='return ShowFilePicker("<%= AjaxPanel.ClientID %>");'> Show Picker</a> </asp:PlaceHolder> </telerik:RadAjaxPanel>Regards,
Peter Filipov
the Telerik team
Browse the vast support resources we have to jump start 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
Jay
Top achievements
Rank 1
Rank 1
answered on 28 Jul 2011, 10:44 PM
It appears adding the RadStyleSheetManager control fixed our problem. Thanks for your help!