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 to rapidly develop powerful and complex AJAX solutions.
The main features of RadAjaxManager are:
You can ajaxify all controls that normally work with postbacks.
It lets you define visually and codeless (in Visual Studio design-time) which elements should initiate AJAX requests and which elements should be updated.
You do not need to modify your application logic.
You can update a number of page elements at once regardless of their position on the page.
Using a single RadAjaxManager on the page so 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.
Note that you cannot have two RadAjaxManagers in a single page. If you are using MasterPage or WebUserControl, the best option is to use a 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 is 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 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 the DefaultLoadingPanelID property of the 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 code example of the screenshot below here.
Setting the Control Relations in Code-Behind
You can set the relationship between ajaxified and updated controls on the server-side as well. For this purpose, you need to use the AddAjaxSetting methods:
You can use any external control to force RadAjaxManager to perform an AJAX request by calling the manager's client-side functions.
When using this function, the event target defaults to the RadAjaxManager instance.
and have RadAjax generate the necessary code for you.
1. The ajaxRequest()funtion:
The parameters, which the control had used when it raised the request.(Optional)
This function can be handled by the AjaxRequest event on the server.
2. The ajaxRequestWithTarget(eventTarget, eventArgument) function can be called to simulate a postback/AJAX request send by another control with the specified UniqueID and specified arguments:
The control that should raise postback event. Otherwise, if your control is in an INamingContainer, you should use the control's UniqueID.
This is an optional argument for the event.
When you set a control as an 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.