How to use Telerik Rad ajax with your asp.net application

No matter which control you would chose (RadAjaxManager or RadAjaxPanel) the application should function properly with regular postbacks in order to be AJAX-enabled as expected.

In general, should one get an error, the first step in troubleshooting the problem would be to set EnableAJAX RadAjaxControl property to false. This will disable AJAX temporary.

RadAjaxPanel

The Panel control mimics the behavior of ASP:UpdatePanel control - all the postbacking controls surrounded within start performing AJAX updates. Read more about the RadAjaxPanel here.

asp:ScriptManager ID="ScriptManager" runat="server"/>
telerik:RadAjaxPanel id="RadAjaxPanel1" runat="server"
EnableAJAX= "True">
/telerik:RadAjaxPanel>
br />
input type=button value="Change color" onclick='%=RadAjaxPanel1.ClientID%>.ajaxRequestWithTarget("%= RadAjaxPanel1.UniqueID %>", "ChangeColor")' />

RadAjaxManager

The Manager purpose is to configure the necessary AJAX settings specifying the AJAX initiators and updated controls. The AJAX initiator (ajaxified control) is the one which would perform the AJAX request updating the respectively set controls.

Add AjaxSettings programmatically
In some cases you need to add AJAX pair dynamically (at runtime). You should always do this in a Page event handler, which is executed each time during the page lifecycle (Page_Load, Page_PreRender) so that the control could be ajaxified when the page is initially loaded.

You cannot add AJAX settings dynamically in Page_Init event. It is too early in the page lifecycle since the AJAX Manager is not created yet.

protected void Page_Load(object sender, EventArgs e)
{
RadAjaxManager1.AjaxSettings.AddAjaxSetting(Button1, Panel1, null);
}

RadAjaxManagerProxy

Similar to the AJAX Manager control, the Manager proxy is an additional option to configure the necessary AJAX settings completely design-time. The Manager proxy control is widely used in WebUserControl or Master/ContentPage scenarios.

RadAjax no longer allows more than one RadAjaxManager on the page. Instead, in a complex scenario like WebUserControls or Master/ContentPages, one should place RadAjaxManager instance on the main/master page and add a proxy control to the user control/content page. RadAjaxManagerProxy copies the exact same RadAjaxManager designer configuration so that one can set all the necessary AJAX settings within the WebUserControl/ContentPage entirely through the designer.

telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
AjaxSettings>
telerik:AjaxSetting AjaxControlID="DropDownList1">
UpdatedControls>
telerik:AjaxUpdatedControl ControlID="DetailsView1" />
telerik:AjaxUpdatedControl ControlID="GridView1" />
/UpdatedControls>
/telerik:AjaxSetting>
telerik:AjaxSetting AjaxControlID="GridView1">
UpdatedControls>
telerik:AjaxUpdatedControl ControlID="GridView1" />
telerik:AjaxUpdatedControl ControlID="DetailsView1" />
/UpdatedControls>
/telerik:AjaxSetting>
/AjaxSettings>
/telerik:RadAjaxManagerProxy>

RadAjaxLoadingPanel

The LoadingPanel is displayed over or above the updated controls during AJAX updates.

telerik:RadAjaxLoadingPanel
id="LoadingPanel1"
runat="server"
Width="256px"
Height="64px">
asp:Label id="Label2" runat="server" ForeColor="Red">Loading... asp:Label>
asp:Image id="Image1" runat="server" Width="224px" Height="48px" ImageUrl="Loading.gif">asp:Image>
/telerik:RadAjaxLoadingPanel>

RadAjax and MasterPage

The controls in Telerik RadAjax suite can be used in various scenarios with MasterPage. However, one should have in mind that she cannot have two RadAjaxManagers in master and content page at the same time.

so we strongly recommend placing RadAjaxManager in MasterPage and adding proxy controls in content pages.

With RadAjaxManager in your MasterPage you can ajaxify and update every single control in your application. The example below shows how this could be achieved adding the necessary AJAX settings programmatically.

protected void Page_Load(object sender, EventArgs e)
{
Label Label1 = (Label)ContentPlaceHolder1.FindControl("Label1");
RadAjaxManager1.AjaxSettings.AddAjaxSetting(btnDecrease, Label1);
}

protected void btnDecrease_Click(object sender, EventArgs e)
{
Label Label1 = (Label)ContentPlaceHolder1.FindControl("Label1");
Label1.Text = Int32.Parse(Label1.Text) - 1 + "";

TextBox1.Text = Int32.Parse(TextBox1.Text) - 1 + "";
}

protected void Page_Load(object sender, EventArgs e)
{
RadAjaxManager AjaxManager = (RadAjaxManager)this.Master.FindControl("RadAjaxManager1");
AjaxManager.AjaxSettings.AddAjaxSetting(btnIncrease, Label1);

TextBox TextBox1 = (TextBox)this.Master.FindControl("TextBox1");
AjaxManager.AjaxSettings.AddAjaxSetting(btnIncrease, TextBox1);
}

protected void btnIncrease_Click(object sender, EventArgs e)
{
Label1.Text = Int32.Parse(Label1.Text) + 1 + "";

TextBox TextBox1 = (TextBox)this.Master.FindControl("TextBox1");
TextBox1.Text = Int32.Parse(TextBox1.Text) + 1 + "";
}

Controls that Are Not Compatible with RadAjaxManager Control

The following ASP.NET controls are not compatible with partial-page updates, and are therefore not supported as initiating or updated controls:

• TreeView and Menu controls.
• Web Parts controls. For more information, see ASP.NET Web Parts Controls.
• FileUpload controls when they are used to upload files as part of an asynchronous postback.
• GridView and DetailsView controls when their EnableSortingAndPagingCallbacks property is set to true. The default is false.
• Login, PasswordRecovery, ChangePassword, and CreateUserWizard controls whose contents have not been converted to editable templates.
• The Substitution control.

Disable AJAX when client browser does not support it

RadAjaxManager1.EnableAJAX = Page.Request.Browser.SupportsXmlHttp;

My page went blank after I fired an event from dynamically loaded user control
This can happen of improper loading of User Controls. When loading user controls you need to have in mind two things:

1. Always recreate the last loaded User Control on Page_Init/Page_Load
2. Assign unique IDs to the loaded controls

If the page goes blank please check if the control is always recreated. For more info about correct loading of user controls dynamically, please refer to this topic.

AJAX And File Upload

See Also

Controls > RadAjax > General Troubleshooting > AJAX And File Upload

Glossary Item Box

You may experience difficulties trying to upload files with ajaxified controls. For example using the standard on AJAX request the uploaded files items will be empty.
Indeed, there are browser restrictions and XmlHttpRequest object limitations which makes uploading files through AJAX requests impossible. Thus, if you want to use Telerik RadAjax controls with a page, where a control perform uploading files, this control should make regular post-backs instead.
In a typical scenario you may have the whole page (or a part of it) nested within an RadAjaxPanel. In this case you have to manually exclude from ajaxifying the control, which is implemented to upload files. Detailed information how this could be achieved may be found in the "Exclude controls from ajaxifying" help topic.

Ajax, ViewState, and Firefox

The Mozilla Development Center states that setting cache-control: no-store in the response header of the page prevents Firefox from caching the page so you could use the following code snippet to add a cache-control: no-store response header to any page requested by any browser that is not Internet Explorer:

protected void Page_Load(object sender, EventArgs e)
{
if (Request.Browser.MSDomVersion.Major == 0) // Non IE Browser?)
{
Response.Cache.SetNoStore(); // No client side cashing for non IE browsers
}
}


******

RadAjaxManager1.Alert("Please save your changes.");

RadAjaxManager1.FocusControl(Button1);

RadAjaxManager1.GetAjaxEventReference(Button1.ClientID);
//... returns "$find("RadAjaxManager1").ajaxRequest("Button1");"

RadAjaxManager1.RaisePostBackEvent(DateTime.Now.ToString());