page 1 of 5
r.a.d.ajax: Time-Saving AJAX from Telerik
by Mike Gunderloy
You’ve probably heard a lot about AJAX lately. But there are many different ways to add AJAX
applications to your ASP.NET applications. This white paper will show you some of the essential
differences between telerik r.a.d.ajax and other AJAX frameworks. If your previous experiences
with AJAX have been tedious and time-consuming, you’ll appreciate telerik’s approach.
AJAX offers your applications better interactivity, smoother updates, and more sophisticated user
interfaces. However, many AJAX frameworks come only at the cost of considerable developer
You may have to add dozens of special AJAX-enabling panels to the design of your forms,
possibly even forcing a page redesign to accommodate the requirements of the AJAX
On a page with many controls, the AJAX logic is often scattered around, forcing a “hunt
and click” approach to finding out which controls have been AJAX enabled.
Many frameworks treat AJAX as an essentially “pull” operation, so that if one control
updates two other controls, you need to set this up in two places—one for each control
Some frameworks do not support existing ASP.NET 1.0 and 1.1 applications, forcing you
to undertake costly and time-consuming rewrites to ASP.NET 2.0 before you can employ
If this is your impression of AJAX frameworks, stop right now and try telerik r.a.d.ajax. Unlike
primitive first-generation AJAX frameworks, telerik designed r.a.d.ajax from the ground up to
make life easier for the developer as well as for the end user. At telerik, we applied our years of
experience delivering world-class ASP.NET controls to the design of r.a.d.ajax. The result is an
AJAX product that integrates seamlessly with Visual Studio to provide an easy, no-code way to
add the benefits of AJAX to both new and existing ASP.NET applications.
Adding AJAX the Easy Way
Developers can choose from many AJAX frameworks. Depending on which ones you’ve tried, your
experience with adding AJAX functionality to an existing ASP.NET Web Form might go something
Identify the regions of the form that will be updated when the user makes an AJAX
request on the Web Form.
Place some sort of invisible panel control, supplied by the framework, to define each of
Relocate the form’s existing controls so th at they are contained within the appropriate
panel controls. If necessary, redesign the form so that controls that respond to the same
AJAX callback are contained in a single rectangular region.
Wire up triggers between each of the AJAX-e nabling panel controls and the controls that
will cause that panel to update its contents.
While this approach can certainly work, it’s slow and inefficient and may force you to make visual
design compromises. Worse, most of that work is simply unnecessary. After all, why should you
need to visually define where the controls are on a Web Form? Tags that make up the controls
themselves already contain that information. You should not have to move and rearrange controls
to change the code that runs when the user interacts with your form.
page 2 of 5
To see how easy adding AJAX to an existing application can be, let’s start with the ASP.NET form
shown in figure 1.
Figure 1. Three-pane sample application.
You can see the straightforward flow of this application. When the user selects a date on the
calendar, it updates the DataGrid in the middle pane to display the messages for that date. When
the user selects a message, the application displays the contents of the message in the message
pane on the right by updating a DIV in the HTML code.
To AJAX-enable this application using r.a.d.ajax, follow these steps:
Drag a RadAjaxManager control from the ASP.NET Toolbox to the Web Form.
Select Configure Ajax Manager from the list of tasks for the control to open the
r.a.d.ajax Property Builder shown in figure 2.
page 3 of 5
Figure 2. Configuring AJAX properties.
Select the Calendar control as the initiating control and the EmailGrid and MessageBody
as the controls to update.
Select the EmailGrid as the initiating control and the MessageBody as the control to
Watch a video of how to use r.a.d.ajax here:
Congratulations! You now have an AJAX-enabled form that uses AJAX callbacks to update the
specified controls in place of postbacks.
Consider the things that you didn’t have to do to make this work:
You didn’t write any new code.
You didn’t add any container controls (or any controls beyond the single
You didn’t modify individual controls on your form.
You didn’t change existing code.
These techniques make adding an AJAX framework easy for development and easy to use.
Central Management of AJAX Behavior
Some AJAX frameworks seem to go out of their way to make it difficult to see what they’re doing
to your ASP.NET pages. If you’ve placed 20 panels on a complex page and scattered 50 triggers
around to control the AJAX behavior of the page, how can you get an overall view of what’s going
on? You’re practically forced to maintain an external list in a spreadsheet or text document just to
keep everything straight.
page 4 of 5
In contrast with other frameworks, telerik r.a.d.ajax offers one central location, the Property
Builder (figure 3), where you can control all of the AJAX behavior of the entire page.
Figure 3. r.a.d.ajax Property Builder.
The left pane of the Property Builder shows you which controls on the page will initiate AJAX
updates. A checked control will trigger an AJAX callback rather than a full ASP.NET postback. As
you select controls, the middle pane shows the controls to update in response to the AJAX
callback. Finally, the right pane shows additional properties for the selected updated control.
r.a.d.ajax 1.0 supports a single additional property, the ID of an AjaxLoadingPanel control. This
control, normally invisible, displays an animation while an AJAX callback is in progress. Figure 4
shows some of the variety of animations that are available in the standard r.a.d.ajax package for
Figure 4. AjaxLoadingPanel animations.
page 5 of 5
Work the Way You Think
Depending on the AJAX framework you choose, you’ll use either a “push” or “pull” method to set
up the logic between controls. To illustrate the difference, consider a single control (perhaps a
CheckBox) that needs to initiate an AJAX callback to update two other controls (such as a
DropDownList and a GridView).
With a “pull”-oriented AJAX framework, you’ll set this up as two separate trigger operations, each
one attached to one of the controls to be updated. You’ll set the first trigger on the DropDownList
so that it updates when the user clicks the CheckBox. You’ll set the second trigger on the
GridView so that it also updates when the user clicks the CheckBox. If your AJAX framework
works in this manner, you’ll find yourself being forced to think backwards—from effect to cause—
every time you need to implement a piece of AJAX behavior.
In contrast, telerik r.a.d.ajax implements a “push” logic model that better matches the way that
most developers think and requires fewer setup operations. Using the r.a.d.ajax model, you
select the initiating control (the CheckBox) and then select both the DropDownList and DataGrid
as controls to update when the user clicks the initiating control (the CheckBox). Using the
Property Builder saves the whole chain of callbacks as a single step.
In the trivial case of a form with three controls, the savings in time and mental energy may not
seem like much. But suppose you’ve got a very complex ASP.NET form with fifty controls and a
complex web of interrelated updates. Would you rather set up individual update triggers between
every control and every other control that has to update it, or work through the controls in the
same order that you naturally interact with them in the course of operating the application? The
telerik approach is almost always easier to comprehend and quicker to execute.
Start with the Applications You Already Have
In an ideal world you’ve already migrated all of your ASP.NET applications to version 2.0 of the
.NET Framework. Some AJAX products assume that you’re already living in that world because
they only work with .NET 2.0. However, telerik r.a.d.ajax works equally well on .NET 1.0 and 1.1
as it does on .NET 2.0. This means that if you want to AJAX-enable an ASP.NET 1.1 application
you can do so, without having to spend time upgrading the application first.
Of course, the RadAjaxManager and its supporting controls work the same in .NET 1.0, 1.1, and
2.0, so that when you do find the time to upgrade your application, the AJAX features will
continue to work seamlessly. There’s no need to learn different programming models for different
versions of the .NET Framework.
Getting Started with telerik r.a.d.ajax
The best way to see how easy r.a.d.ajax is to use is to try it yourself. You can browse through
our online demos at
download a full working 30-day trial version at http://www.telerik.com/asp-net-
controls/r.a.d.ajax/download-trial.aspx. Install the trial version and you can have your own
application running in AJAX mode in less than an hour. Then visit our online store for pricing and