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
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.
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.
<
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.
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.
<%@ 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
>
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.