RadUpload cannot upload files using AJAX calls. This is a limitation of the XmlHttpRequest component, used in all AJAX frameworks for
asynchronous calls to the application. In order to upload a file your application must perform a full page postback.
If you have automatically AJAX-enabled buttons or other controls that normally perform postbacks placed in UpdatePanel, RadAjaxPanel, or
RadGrid, you can use one of the following approaches to make the control to perform postbacks again:
Workaround for ASP.NET AJAX
You can create a PostBackTrigger in the UpdatePanel for the button that initiates postback:
| [ASP.NET] Using PostBackTrigger |
 Copy Code |
|
<asp:UpdatePanel runat="server" id="UpdatePanel1">
<ContentTemplate >
<telerik:RadUpload runat="server" id="RadUpload1"
/>
<asp:Button runat="server" id="ButtonSubmit"
text="Postback" />
</ContentTemplate >
<triggers>
<asp:PostbackTrigger controlid ="ButtonSubmit" />
</triggers>
</asp:UpdatePanel>
|
Workaround for RadAjaxPanel or RadAjaxManager
Attach an event handler to the OnRequestStart client-side event of the RadAjaxPanel / RadAjaxManager, which disables the AJAX functionality
when a specific button is clicked.
 |
The get_eventTarget() method of the args parameter contains the UniqueID of the
clicked button. |
| [ASP.NET] using OnRequestStart for RadAjaxPanel |
Copy Code |
|
<RadScriptBlock ID="RadScriptBlock1" runat="server">
<script type="text/javascript">
// on upload button click temporarily disables ajax to perform
// upload actions
function conditionalPostback(sender, args)
{
if (args.get_eventTarget() == "<%= ButtonSubmit.UniqueID
%>")
{
args.set_enableAjax(false);
}
}
</script>
</RadScriptBlock>
<telerik:RadAjaxPanel runat="server"
id="RadAjaxPanel1"
ClientEvents-OnRequestStart="conditionalPostback">
<telerik:RadUpload runat="server" id="RadUpload1"
/>
<asp:Button id="ButtonSubmit" runat="server" text="Upload" />
</telerik:RadAjaxPanel>
|
Workaround for RadGrid classic
RadGrid for ASP.NET AJAX no longer supports the EnableAjax feature. However, if your application mixes RadUpload for ASP.NET
AJAX controls with RadGrid "classic", you can use the same technique as in the previous workaround for buttons
inside RadGrid. Since the button that initiates a postback is in a template, you cannot use its UniqueID directly. Instead, you must check for its
ID. You must ensure that you have no other buttons with the same ID on the page.
|
UpdateButton and PerformInsertButton are the IDs of the integrated in
RadGrid Update and Insert buttons. If you have custom edit form with buttons that have different IDs, use their IDs instead. |
| [ASP.NET] Using OnRequestStart for RadGrid Classic |
Copy Code |
|
<script type="text/javascript">
//on insert and update buttons click temporarily disables ajax to perform upload actions
function conditionalPostback(sender, args)
{
var re = new RegExp("\.UpdateButton$|\.PerformInsertButton$", "ig");
if (sender.EventTarget.match(re))
{
sender.EnableAjax = false;
}
}
</script>
<telerik:RadProgressManager id="RadProgressManager1" runat="server"/>
<radg:RadGrid runat="server"
id="RadGrid1" EnableAjax="true">
<ClientSettings>
<ClientEvents OnRequestStart="conditionalPostback" />
</ClientSettings>
<MasterTableView >
<Columns>
<radg:GridEditCommandColumn />
<radg:GridTemplateColumn UniqueName= "Upload">
<ItemTemplate>
...
</ItemTemplate>
<EditItemTemplate >
<telerik:RadUpload id="RadUpload1" runat="server" />
</EditItemTemplate >
</radg:GridTemplateColumn >
</Columns>
<EditFormSettings >
<EditColumn UniqueName="EditCommandColumn1">
</EditColumn>
</EditFormSettings >
</MasterTableView >
</radg:radgrid>
|
Workaround for RadGrid for ASP.NET AJAX
Since RadGrid for ASP.NET AJAX no longer supports the EnableAjax feature, one possible way of ajax-ifying it is by placing it inside
a RadAjaxPanel for example (the workaround is similar when using RadAjaxManager).
If you have button or other control, which normally does postbacks, placed in the ajax-ified RadGrid you need to attach an event handler for the
OnRequestStart client-side event of the RadAjaxPanel (RadAjaxManager), which will disable the AJAX functionality if a specific
button is clicked. What is more AJAX can disabled only if there are files selected for upload. For this purpose the client ID of the RadUpload is stored in a global
client-side variable as the Grid triggered in Edit Mode.
| [ASPX] |
Copy Code |
|
<telerik:radscriptblock id="RadScriptBlock1" runat="server">
<script type="text/javascript">
//On insert and update buttons click temporarily disables ajax to perform upload actions
function conditionalPostback(sender, args)
{
var theRegexp = new RegExp("\.UpdateButton$|\.PerformInsertButton$", "ig");
if (args.get_eventTarget().match(theRegexp))
{
var upload = $find(window['UploadId']);
//AJAX is disabled only if file is selected for upload
if(upload.getFileInputs()[0].value != "")
{
args.set_enableAjax(false);
}
}
}
</script>
</telerik:radscriptblock>
<telerik:radajaxpanel id="RadAjaxPanel1" runat="server" clientevents-onrequeststart="conditionalPostback">
<telerik:radprogressmanager id="RadProgressManager1" runat="server"/>
<telerik:radgrid runat="server" id="RadGrid1" onitemdatabound="RadGrid1_ItemDataBound">
<mastertableview>
<columns>
<telerik:grideditcommandcolumn />
<telerik:gridtemplatecolumn uniquename="Upload">
<itemtemplate> ... </itemtemplate>
<edititemtemplate>
<telerik:radupload id="RadUpload1" runat="server"
/>
</edititemtemplate>
</telerik:gridtemplatecolumn>
</columns>
<editformsettings>
<editcolumn uniquename="EditCommandColumn1"></editcolumn>
</editformsettings>
</mastertableview>
</telerik:radgrid>
<telerik:radajaxpanel>
|
| [C#] |
Copy Code |
|
protected void RadGrid1_ItemDataBound(object
sender, GridItemEventArgs e)
{
if (e.Item is GridEditableItem &&
e.Item.IsInEditMode)
{
RadUpload upload = e.Item.FindControl("RadUpload1") as
RadUpload;
RadAjaxPanel1.ResponseScripts.Add(string.Format("window['UploadId']
= '{0}';", upload.ClientID));
}
}
|
| [VB.NET] |
Copy Code |
|
Protected Sub RadGrid1_ItemDataBound(ByVal sender As Object, ByVal e As GridItemEventArgs)
If TypeOf e.Item Is GridEditableItem AndAlso e.Item.IsInEditMode Then
Dim upload As RadUpload = TryCast(e.Item.FindControl("RadUpload1"), RadUpload)
RadAjaxPanel1.ResponseScripts.Add(String.Format("window['UploadId'] = '{0}';",
upload.ClientID))
End If
End Sub
|
Alternative workaround for RadAjaxPanel (and RadGrid classic)
RadAjax automatically replaces all instances of "__doPostBack" inside AJAX-enabled controls such as those that are placed inside RadAjaxPanel.
If you create a JavaScript function which calls __doPostBack inside its body and call that function instead of __doPostBack, you can perform postbacks from AJAX-enabled
controls.
|
If you place the realPostBack function defined in the example inside a user control, make sure that it is not placed inside
RadAjaxPanel (or inside RadGrid classic), because it will automatically replace the call to __doPostBack in the realPostBack
function body. In this case, you must declare the realPostBack function in the ASPX page. |
| [ASP.NET] realPostBack function |
Copy Code |
|
<script type="text/javascript">
function realPostBack(eventTarget, eventArgument)
{
__doPostBack(eventTarget, eventArgument);
}
</script >
<telerik:RadAjaxPanel runat="server"
id="RadAjaxPanel1">
<asp:Button runat="server" id="ButtonSubmit" text="Upload" />
<telerik:RadUpload runat="server" id="RadUpload1"
/>
</telerik:RadAjaxPanel>
|
| [C#] Assigning realPostBack function |
Copy Code |
|
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostback)
{
GetPostBackEventReference(this);
ButtonSubmit.Attributes.Add( "onclick",
string.Format("realPostBack('{0}', '');
return false;", ButtonSubmit.UniqueID));
}
}
|
| [VB] Assigning realPostBack function |
Copy Code |
|
Protected Sub Page_Load(ByVal sender As
Object, ByVal e As EventArgs) Handles
Me.Load
If Not IsPostBack Then
GetPostBackEventReference( Me)
ButtonSubmit.Attributes.Add( "onclick", _
String.Format("realPostBack('{0}', ''); return
false;", ButtonSubmit.UniqueID))
End If
End Sub
|
See Also