RadAjaxPanel Demystified

Often I can look at one of our RadControls and know right away why using it offers a greater benefit than one of the built-in ASP.NET controls. The RadAjaxPanel is no different, but often I hear of confusion from developers as to the benefit of using this control over the built-in UpdatePanel. Well, it certainly offers the same kind of functionality as an UpdatePanel, but there's more available to you if you dig a little deeper.

Basic Ajax Functionality

For starters, it's important to understand how the RadAjaxPanel is meant to be used. The typical use-case scenario is when a developer has a single control or group of controls that always needs to be updated when that control (or a control in the group) causes a partial-page post back. A common example is the RadGrid: following a post back to the server, the grid should be updated when the response is returned to the browser. This is easy to set up by simply wrapping the RadGrid in a RadAjaxPanel. At this point you might be thinking, but that's what we can already do with the UpdatePanel. Well, the beautiful thing about the RadAjaxPanel is that it is incredibly simple, even more so than the UpdatePanel. While the UpdatePanel offers many different UpdateModes and Triggers, which can sometimes confuse developers new to the control, the RadAjaxPanel simply assumes that all controls it contains should cause a partial-page post back. Don't get me wrong, sometimes there are times when we need to set up controls that trigger other controls and so forth, but we have the RadAjaxManager to handle the more complicated scenarios. You see, the smart guys at Telerik pulled the simplest partial-page post back functionality out of the UpdatePanel and stuck it into its own control, making development that much easier.

Design Time Features

But besides the obvious Ajax functionality of the RadAjaxPanel, several other features have been included to help the RadAjaxPanel rise even further above its cousin the UpdatePanel. First, as all other Telerik controls, the RadAjaxPanel offers a much richer design-time experience. Many of the important properties, which will be discussed shortly, can be included by simply checking them off on the context menu. Enable or disable Ajax functionality, hook it up to a RadAjaxLoadingPanel, or click a link for instant online help. Design-time development is much easier than with the UpdatePanel. No more switching to Source View to add a property or hunting for it in the Properties window.

Properties

Speaking of properties, the RadAjaxPanel is host to over 35 properties, all of which offer additional features ranging from visual enhancements to improved Ajax functionality. Compare that to the UpdatePanel's 5 properties, and I think you'll agree it's quite an improvement. One set of properties that I think is easily overlooked is the fact that not only is this a control to add Ajax functionality to your page, but it's also a Panel control. If you want your UpdatePanel to double as a Panel control, you have to actually add a Panel control to its ContentTemplate. On the other hand, the RadAjaxPanel doubles as a Panel control out of the box, offering the appearance, behavior, and layout properties you'd expect from such a control.

In addition, the follow properties add further unique functionality to the RadAjaxPanel:

• EnableAjax: This property allows developers to switch the RadAjaxPanel's Ajax functionality on or off. When set to false, the RadAjaxPanel becomes simply another Panel control. So why would you would ever use this property? Well, there might  be times when performing a full page postback is necessary, and you can access and manipulate the value of this property through the RadAjaxPanel's client-side or server-side objects.
• RequestQueueSize: What I consider to be one of the coolest features of the RadAjaxPanel, this property allows developers to queue AJAX requests. Normally an asynchronous request to the server would cancel any prior requests, but with this feature you can instead have those requests sit in a queue until all other requests have been returned from the server.
• EnableHistory: An advanced feature that is ahead of its time, the EnableHistory property automatically sets history points in IE when a partial-page post back occurs. You should be warned that this feature is somewhat unreliable and only works in Internet Explorer. However, with the release of .NET Framework v3.5 SP1, and subsequently the built-in support for AJAX-enabled browser history, you can expect this feature to improve with upcoming Telerik releases.

While these properties are the ones that pack the biggest punch, don't forget that there are still other properties in the RadAjaxPanel that you can check out for yourself.

Server-Side Programming

The RadAjaxPanel sports some great server-side additions over the UpdatePanel. While you can obviously access all of the control's properties on the server, there are also some important server-side events that you will have access to when using this control, the most important of which is the OnAjaxRequest event. Fired when the RadAjaxPanel sends an asynchronous request to the server, this event receives a single string argument. This event cannot be canceled.

The two other events, OnAjaxSettingCreating and OnAjaxSettingCreated, occur when an AjaxSetting is added to the RadAjaxPanel's AjaxSettings collection.

Client-Side Programming

One of the things that make Telerik controls so great, their rich client-side APIs, definitely holds true with the RadAjaxPanel. The client-side features of this control allow developers to do on the client just about anything that can be done on the server, with a little extra up-front JavaScript. For instance, you can change the RadAjaxPanel's AjaxSettings, turn Ajax functionality on or off, enable history points, or set the id of the associated RadAjaxLoadingPanel, all without making a trip to the server. In addition, you can intercept Ajax calls to the server and/or the response from the server by adding event handlers for the client-side events OnRequestStart and OnResponseEnd. Finally, you can send an Ajax request to the server manually by calling the RadAjaxPanel client-side object's ajaxRequest() or ajaxRequestWithTarget() functions. Both functions take an eventArgument parameter, which is the string that is passed to the server-side OnAjaxRequest event. The second function allows developers to tell the server which control caused the post back by adding the additional argument, eventTarget, which is the UniqueID of a control.

Conclusion

At first glance the RadAjaxPanel appears to be simply an UpdatePanel control repacked with some Telerik branding. I don't think this could be farther from the truth. While it takes a simpler approach to adding Ajax functionality to a web page (leaving the more complicated scenarios to its sibling, the RadAjaxManager), the RadAjaxPanel offers quite a bit of additional functionality. But don't take my word for it, go give it a try for yourself.