RadControls for ASP.NET AJAX RadAjaxManager is one of the two major controls of the Telerik RadAjax suite. The other one is AJAX Panel. RadAjaxManager allows developers rapidly develop powerful and complex AJAX solutions.
The main features of RadAjaxManager are:
You can ajaxify all controls that normally work with postbacks.
Defines visually and codeless (in Visual Studio design-time) which elements should initiate AJAX requests and which elements should be updated
No need to modify your application logic
Allows you to update a number of page elements at once regardless of their position on the page.
No need to write any JavaScript or invoke AJAX requests manually
Using a single RadAjaxManager on the page you can create complex web applications like Microsoft Outlook ® Web Access portal.
The visual designer of RadAjaxManager, accessible in VisualStudio, lets you set even the most complicated update scenarios such as:
A single control to update one or more controls with an AJAX request: | 1 updates 2 and 3 |
A second control to update other controls (or even controls from the previous scenario) with an AJAX request: | 3 updates 2 and 5 |
A control to update itself with an AJAX request: | 6 updates 6 (i.e. itself) |
Call the RadAjaxManager API from a control on the page and update control(s) on the page | Using the RadAjaxManager API, 2 is made to update 1 and 4 |
In order to use RadAjaxManager, you need to drag it from the VisualStudio toolbox to your page.
 Caution |
|---|
Note that you can't have two RadAjaxManagers in a single page. In case of MasterPage or WebUserControl, the best option is to use single RadAjaxManager on the master/main page. |
Setting the control relations in Property Builder
RadAjaxManager comes with a visual builder for setting the relations between the AJAX request initiator and the controls that will be updated. You can start the property builder by right-clicking the control and choosing the Configure RadAjaxManager command in the control's smart tag.
The property builder is pretty intuitive and simple to use. The tool has three panes:
The left pane is a treeview with all controls on the page. Select a control that will initiate the callback request. Only the controls that have their check-boxes checked will initiate callbacks. Once you select the control in this pane, you need to choose the controls that will be updated. This can be done in the middle pane.
The middle pane is another treeview with all controls on the page. Here you can select which controls will be updated after a callback request from the control checked and selected in the left pane.Please note that your selection in the middle pane can be applied only to one control from the left pane. Thus you can have different sets of controls that will be updated depending on the callback initiator control (from the left pane). After you set the controls that will be updated, you may select a Loading panel for each one of them. The Loading panel is set in the right pane.
The right pane lets you specify the Loading panel that will be used for the controls selected in the middle pane. Each control that will be updated can have a separate Loading panel set. A default loading panel could be set as well through DefaultLoadingPanelID property of RadAjaxManager control. If it is used, there is no need to set the loading panel on each new AJAX setting - the default loading panel will be automatically applied everywhere.
You can find the working example of the screenshot below here.
Setting the control relations in code-behind
You can set the relationship between ajaxified and updated controls on server-side as well. For this purpose you need to use the AddAjaxSetting methods:
CopyC#
RadAjaxManager1.AjaxSettings.AddAjaxSetting(<ajaxified control>, <updated control>);
RadAjaxManager1.AjaxSettings.AddAjaxSetting(<ajaxified control>, <updated control>, <LoadingPanel> or null if none);
CopyVB.NET
RadAjaxManager1.AjaxSettings.AddAjaxSetting(<ajaxified control>, <updated control>)
RadAjaxManager1.AjaxSettings.AddAjaxSetting(<ajaxified control>, <updated control>, <LoadingPanel> or Nothing if none)
Client-side functions
You can make any external control to force RadAjaxManager to perform an AJAX request by calling manager's client-side functions. When using this function the event target defaults to the RadAjaxManager instance.
 Note |
|---|
You can construct the javascript function calls manually or alternatively use the server-side method
GetAjaxEventReference
and have Telerik RadAjax generate the necessary code for you. |
$find("<%=AjaxManager1.ClientID%>").ajaxRequest(arguments) | |
|---|
arguments | The parameters, which the control had used when it raised the request |
This function can be handled by the AjaxRequest event on the server.
The ajaxRequestWithTarget(eventTarget, eventArgument) function can be called to simulate a postback/AJAX request send by other control with the specified UniqueID and specified arguments.
__doPostBack(eventTarget, eventArgument) or $find("<%=AjaxManager1.ClientID%>").ajaxRequestWithTarget(eventTarget, eventArgument) | |
|---|
eventTarget | The control which should raise postback event. Otherwise if your control is in a INamingContainer, you should use the control's UniqueID. |
eventArgument | This is optional argument for the event |
When you set a control as eventTarget it will raise an AJAX request and will update the controls that it was set to update in the property editor. This function can be handled by the correspondent event handler (i.e. Button_Click) on the server.
See Also