RadAjax for ASP.NET

Migrating from r.a.d.callback to Telerik RadAjax Send comments on this topic.
See Also

Glossary Item Box

The patent-pending technology used in Telerik AJAX framework allows developers to AJAX-enable any ASP.NET application without writing a single line of code. This brings Telerik RadAjax suite to a higher level in terms of ajaxifying the web pages compared to its predecessor r.a.d.callback. Instead of having a complete set of individual AJAX-enabled controls, it features the ajaxifier controls AJAX Manager and AJAX Panel, which will automatically AJAX-enable any postback control.

AJAX Manager is a control that ajaxifies selected controls on the page. It makes any control on the page perform an AJAX request and update one or more controls including itself. AJAX Manager has a visual tool that makes it very easy and completely codeless to set the relation between the callback initiator and the updated control(s).  

AJAX Panel is an container control that makes all controls placed inside it start performing callbacks instead of postbacks. 

Migrating Callback Controls to RadAjaxManager

The Telerik RadAjax suite does not contain the callback controls from the r.a.d.callback package. This might require some changes: your applications will no longer use the old callback controls; instead, AJAX Manager will ajaxify the standard controls.
AJAX Manager is kept compatible with the callback controls and they can co-exist on the same page. This can help you migrate your pages smoothly over a longer period of time.

In general, you need to replace the callback controls with their ASP.NET counterparts. Then you need to set them in Ajax Manager as AJAX request initiators (see The AJAX Manager topic).

The example below demonstrates how to migrate a CallbackCheckBox to standard CheckBox and AJAX Manager.

The implementation with r.a.d.callback:

ASPX/ASCX Copy Code
<radClb:CallbackCheckBox
 
id="cbAdditionaInformation"
 
runat="server"
 
Text="Add Contact Information"
 
ControlsToUpdate="outerPanel,LoadingPanel2">
</
radClb:CallbackCheckBox>  
 

Same with RadAjax:

 The manager will auto-generate this code in the ASPX:

ASPX/ASCX Copy Code
<rad:RadAjaxManager ID="RadAjaxManager1" runat="server">
<AjaxSettings>
 
<rad:AjaxSetting AjaxControlID="CheckBox1">
  
<UpdatedControls>
   
<rad:AjaxUpdatedControl ControlID="outerPanel" LoadingPanelID="LoadingPanel2" />
  
</UpdatedControls>
 
</rad:AjaxSetting>
</AjaxSettings>
</
rad:RadAjaxManager>  
 
AJAX Manager will transform postbacks to AJAX requests. That is why the CheckBox control needs its AutoPostBack property set to true.


Generic Callback (RadCallback) to RadAjaxManager

The Telerik RadAjax suite no longer features the generic callback control from the r.a.d.callback suite. It has the much more powerfull AJAX Manager control. AJAX Manager has all the functionality offered by the generic callback control. In addition it has a better design-time support and lets you set more accurately the relation between the AJAX initiator and the updated controls. Moreover, you are not required to write any JavaScript in order to initiate a request. Yet you can still trigger a request using client-side code.

A single AJAX Manager can replace several generic callback controls because it lets you set several groups of AJAX initiators and their updated controls.

Migrating the AJAX request initiation can be performed in two ways:

  • Most of the calls to MakeCallback() should be replaced by a postback event.  Remove your calls to MakeCallback(), and set the control's AutoPostBack property to true. Set the control in AJAX Manager using the designer.
  • Client request initiation from JavaScript event handlers - replace the calls to MakeCallback() with calls to AjaxRequest() (see "Changes to the Client API" section below).  describe the changes in functions.

 

CallbackPanel to RadAjaxPanel

RadAjaxPanel entirely replaces the CallbackPanel control. In order to migrate you need to change the CallbackPanel tag in the ASPX with the RadAjaxPanel tag.

Implementation with CallbackPanel:

ASPX/ASCX Copy Code
<radclb:CallbackPanel ID="CallbackPanel1" Width="509px" Height="280px" runat="server">
...
</radclb:CallbackPanel>

Implementation with RadAjaxPanel:

ASPX/ASCX Copy Code
<rad:RadAjaxPanel ID="AjaxPanel1" Width="509px" Height="280px" runat="server">
...
</rad:RadAjaxPanel>  
 
The AsyncRequest method has been deprecated in Telerik RadAjax. Use AjaxRequest instead.

 

Migrating ControlsToUpdate collection to AjaxSettings collection

The successor of ControlsToUpdate collection in Telerik RadAjax is the AjaxSettings collection. There you can add the AJAX pairs of AJAX initiator, updated control and the Loading Template that will be displayed during the request.

in r.a.d.callback here is how you set the ControlsToUpdate collection:

CallbackButton1.ControlsToUpdate.Add(RadGrid1, LoadingPanel1);  

in Telerik RadAjax you should use the AjaxSettings collection of AjaxSetting objects in this way:

RadAjaxManager1.AjaxSettings.AddAjaxSetting(Button1, RadGrid1, LoadingPanel1);

 
Note that you should set the AjaxSettings collection on each Page_Load!

The parameters are as follow:

  • Button1 - the AJAX initiator;
  • RadGrid1 - the control that will be updated;
  • LoadingPanel1 - the Loading Panel that will be shown during the request.

 

Changes to the Client API

  • MakeCallback migrates to AjaxRequest or AjaxRequestWithTarget: both RadAjaxPanel and RadAjaxManager have this new function. Here is a comparison between the old and the new function:

 

RadCallback control (part of r.a.d.callback) RadAjaxPanel and RadAjaxManager (part of r.a.d.ajax)
<%=RadCallback1.ClientID%>.MakeCallback('add', '1, 2, 3');
ClientID The client ID of the generic callback control (e.g. '<%=RadCallback1.ClientID%>')

EventName

The name of the event which raises the callback
EventArgs  The arguments for the event

AjaxRequestWithTarget function:
<%=AjaxPanel1.ClientID%>.AjaxRequestWithTarget(eventTarget, eventArgument)
eventTarget The control which should raise postback event. You should always use the control's UniqueID.
eventArgument This is optional argument for the event
AjaxRequest function
<%=AjaxPanel1.ClientID%>.AjaxRequest(arguments)
arguments The parameters, which the control had used when it raised the request.


  • AjaxRequestWithTarget mimics the __doPostBack(eventTarget, eventArgument) function:
  • <%=AjaxPanel1.ClientID%>.AjaxRequestWithTarget(eventTarget, eventArgument) (see AJAX Panel topic for details).

  • There are a number of changes in the client-side events. They are compatible with r.a.d.callback and should not break the functionality. See the "Client-side" section for details regarding these events.

See Also