Published: 25 Nov 2008
By: Brian Mains

Brian Mains reviews the Telerik’s AJAX controls.

Contents [hide]

Introduction

Telerik is a custom framework vendor that sells controls for building .NET applications. It is one of the many vendors that develop beautiful control suites. The Telerik controls give any developer the ability to develop rich, functional applications, while not losing any visual appeal - due to the support for in-built skins. The core functionality comes with the ability to work on both the client and the server. It features a complete client-side API that uses the ASP.NET AJAX toolkit and also provides support for things like manipulating the UI and client-side data binding. For example, their RadGrid control allows the user to sort, page, reorder the grid, and take advantage of many other features - all on the client without posting back.

The great thing about the Telerik controls is that they built their controls on top of the Microsoft ASP.NET AJAX framework. This means that you can still leverage everything that you may have already done in your ASP.NET application with no problems.

Adding AJAX Features

The RadScheduler control is one of the more functional controls in the Telerik framework. This control presents an Outlook-style calendar to view a person’s schedule in a day, week, and month view. The calendar can navigate between months through a pager or a drop-down calendar. To create an out-of-the-box scheduler component, I created the base scheduler definition shown below.

Listing 1: The Scheduler Markup

In this example, the scheduler uses an underlying data source, which is manually bound to the control (it’s bound through the DataSource property). Because the RadScheduler inherits from the architecture the .NET framework already provides, it supports the DataSource and DataSourceID properties like you see in other data-supporting controls.

There’s some information that the scheduler needs to know about. The most important are the start and end dates of the appointment, a unique key for the appointment, and the subject of the appointment. All of this is used to setup the out-of-the-box scheduling component (using a temporary data source in code-behind) that looks like the following.

Figure 1: Out-Of-The-Box Scheduler

Out-Of-The-Box 

Scheduler

This scheduler component supports adding, editing, or deleting appointments by clicking within the cells of the scheduler. This can be enabled (the default) or disabled by setting the AllowInsert, AllowEdit, or AllowDelete properties. To create a new appointment, simply click in the time slot that’s desired. Additionally, selecting an existing appointment brings up the ability to edit the appointment, or delete it. We’ll get into this later; for now, let’s add some AJAX capabilities to this control because out of the box, every action causes a postback; not quite what we had in mind. This is where the RadAjaxManager comes into play. Take a look at the following definition in Listing 2.

Listing 2: Setting up the RadAjaxManager

The RadAjaxManager provides functionality that’s similar to the UpdatePanel in the ASP.NET AJAX framework. The RadAjaxManager control, in this scenario, designates which controls will post back to the server asynchronously. The AjaxSettings collection lists the controls to listen to for postbacks. A specific event could be listened for (via the EventName property), but in this case I want all the events to be listened to. To do this requires only the control ID. A .NET control is the recipient of this client-side event (the control that gets its interface updated). This control could be the same control as the target; however, this isn’t required as one control may update the interface of another (for instance, clicking a button refreshes a grid, and thus the grid would be listed in the UpdatedControls list). This is the reason for the double identification, so to speak. Now our scheduler works without posting back, which is great to have and very easy to setup.

The question is: Can we do more? After all, wouldn’t it be nice to give the user some notification that an AJAX operation is occurring? The Telerik framework also has this functionality, which comes via the RadAjaxLoadingPanel control.

AJAX loading templates

The RadAjaxLoadingPanel control is a loading panel which appears overtop of a targeted control, displaying a visual cue that some operation is taking place. This loading panel only appears when the page performs its asynchronous processing. The following is an update to the page’s definition to incorporate a RadAjaxLoadingPanel that shows a message to the user. This message appears in a panel that’s filled with a LightYellow background and is 30% transparent.

Listing 3: Showing a loading panel overtop the scheduler

The loading panel does a nice job of giving the user a message when an action performs. The color of the foreground or background can be set in the panel, along with the transparency. Here, the panel is 30% transparent to the user, which gives the following appearance.

Figure 2: The Loading Panel appearing over the scheduler

The Loading Panel appearing over the scheduler

The loading panel appears over the scheduler and is centered horizontally. In this case, the panel contains static text, but could have also used an animated GIF. The body of the panel can be made up of whatever content you desire, because it inherits from Panel and takes any control/markup to make the user interface. Usually an animated GIF is used, and I’d recommend the following web site to create an animated GIF of your choice: http://ajaxload.info/ This site has some great animations, and you can save the image at the end. So while my setup is not the most pretty, there is plenty to add upon.

Styling Controls

Speaking of pretty: Got an existing ASP.NET application you want to “pretty up” but don’t want to rewrite it to use Telerik’s controls? This is, of course, understandable, as it takes a lot of work to develop an ASP.NET application. Telerik includes a handy RadFormsDecorator that decorates the core controls that makeup the UI, like TextBox, CheckBox, RadioButton, DropDownList, and many more controls, simply by defining the following in Listing 4.

Listing 4: Decorating a form

Take a look at the markup. You should have an idea what the typical form looks like; this form is not the ugliest form you’ve ever seen, but here is the results of the makeover that the forms decorator creates:

Figure 3: Forms Decorator using the Web20 Skin

Forms Decorator using the Web20 Skin

Figure 4: Sunset Theme

Sunset Theme

These are two of the many skins that the Telerik framework supports. Note the use of the Skin property in this example; the Skin property is a Telerik-specific setting, while the SkinID is a setting that the .NET framework provides for using its custom skinning capabilities. For Telerik’s skins, Telerik provides many skins that are already complete and ready to go for you, while Microsoft requires that you define your own custom theme.

Using the Proxy

In the ASP.NET AJAX framework, a great place to put the ScriptManager control reference is in the master page. Because the ScriptManager must appear before any other AJAX-enabled control, no control can accidentally exist in the page before the ScriptManager if it lives in the master page. But sometimes a child page or user control needs to add items to the ScriptManager collections for whatever purpose it may need. The way to circumvent finding the reference to the ScriptManager in the code-behind is to use the ScriptManagerProxy control. The proxy is meant to provide UI access to the ScriptManager, while not duplicating the reference. And any number of proxy controls can be defined without causing any problems.

The Telerik controls work the same way; the RadAjaxManager also has a proxy that can be used. This means the RadAjaxManager can exist in the master page, while the proxy adds additional information for a child page or user control. An example of the proxy looks like the following:

Listing 5: Using the RadAjaxManagerProxy

You can see the proxy works mostly the same way. The proxy can define everything the RadAjaxManager can, without duplicating it.

Conclusion

Telerik provides a lot of great features to make an application AJAX-enabled, as we’ve seen in this article. The RadAjaxManager is the key to making the AJAX functionality work, and teams up with the RaxAjaxLoadingPanel to make a nice looking user interface.

<<  Previous Article Continue reading and see our next or previous articles Next Article >>

About Brian Mains

Brian Mains is an application developer consultant with Computer Aid Inc. He formerly worked with the Department of Public Welfare. In both places of business, he developed both windows and web applications, small and large, using the latest .NET technologies. In addition, he had spent many hou...

This author has published 73 articles on DotNetSlackers. View other articles or the complete profile here.

Other articles in this category


Animating a Web Form using ASP.NET AJAX
In this article you will learn how to animate a webform using asp.net ajax.
Jquery Ajax
JQuery makes communicating with the server very, very easy. JQuery uses get(), getJSON(), and post(...
jQuery Deferred Objects Promise Callbacks
jQuery Deferred/Promise objects untangle spaghetti-like asynchronous code.
jQuery in Action 2nd edition: Queuing functions for execution
This article is taken from the book jQuery in Action, second edition. This segment shows how you can...
Test120Jan
This is my custom article

You might also be interested in the following related blog posts


Connecting to SQL Azure with Telerik OpenAccess read more
RadControls for Silverlight 3 Q3 2009 bringing more richness and interactivity to your applications read more
DevReach Follow-up, Part I read more
Binding Hierarchical RadGrid for ASP.NET Ajax with Telerik OpenAccess ORM read more
Telerik Releases New Controls for Silverlight 3 and WPF read more
Using the Telerik OpenAccess WCF Wizard with Multiple Versions of OpenAccess read more
Telerik Announced Official Version of Visual Style Builder for AJAX Controls read more
Telerik Launches RadControls for Silverlight 3 for Line-of-Business Application Development read more
Reporting Q2 2009 release read more
Telerik Introduces Free Web Testing Framework for ASP.NET AJAX and Silverlight read more
Top
 
 
 

Please login to rate or to leave a comment.