Telerik's RadControls are components designed to aid in the development of applications. Telerik offers a whole line of products, from content management systems (Sitefinity) to UI frameworks for web and windows, along with an object-relational mapper tool.  These tools allow developers to create functional, powerful, and stellar web sites.

I say functional in the sense that the user has a rich user interface, leveraging all that AJAX has to offer without having to post back to the server (at least from the server's perspective). I say powerful, because these components give you a lot out of the box that you do not have to recreate. I once was looking to develop an application for a customer that needed some of the functionality that RadControls offered, but without Telerik's framework, I would have spent a lot more hours developing an application that offered them much, much less functionality. Telerik helped me to deliver a better product.

I end with stellar because applications need a better appearance, and Telerik delivers on this by using CSS and images to generate a better UI. It makes use of gradient images for header backgrounds and appealing background images.

For the examples in this article, I am going to use Telerik's RadControls to build a site layout.  When developing a template, some of the controls that Telerik provides that make the template better are:

·         Rotator - Like the ASP.NET AdRotator control, this control can rotate advertisements, but in a much better way. The typical ASP.NET AdRotator control displays one image on every page load. Telerik's control rotates many images at the same time. This means multiple ads can be displayed at one time in a rotating fashion, rather than a single advertisement.

·         PanelBar - This control creates an outlook-like navigation bar, which expands or collapses the panels open so that only one panel is visible at a time. If you are familiar with the AJAX control toolkit, this is similar to the Accordion, except much better.

·         Dock - The docking controls provide web part functionality to a page, while giving you control over how the content is loaded or saved to the database. This is nicer because the .NET framework does not make it easy to load/save content to a custom database (you have to create a custom personalization provider to store to your own custom data store).

·         Toolbar - The toolbar control renders a bar at the top of the page, containing a combination of buttons, drop down, and split buttons to represent the page.  The toolbar is reminiscent of a windows application, a feature that is great for rich applications.

·         Menu - This is another control that functions like most windows-based applications, giving the user the ability to select a specific menu item in a complex menu navigation structure. This menu is similar to the ASP.NET menu control, but is better in many respects.

·         TreeView - The tree control from Telerik is a great control to have, if that is the type of navigation system desired. While tree controls are nice to have, some UI layouts need the panel bar or a menu.

Only the first three controls will be evaluated in this article.

When designing a template, it is not just as simple as picking the layout controls. You are still in control of the layout design choices (is the panel bar on the left or the right side of the app?).  This often requires some playing around and repositioning accordingly. However, this article is going to focus in the components themselves. Let us begin to examine them.

Note: This article assumes that you have downloaded and installed Telerik RadControls for ASP.NET AJAX.

If you have used Outlook, you are familiar with the RadPanelBar control. This control uses the same look as the navigation panes on the left side of Outlook 2007. Each pane in the RadPanelBar control is made up of RadPanelItem objects. Each panel item has an Items collection, which represent a child item of the parent panel bar item. The basic approach is that the items generate a hierarchical structure; the root level items generate the headers, and any child items generate a hierarchical collection within each header. For instance, look at the following panel bar control setup.

Listing 1

<tel:RadPanelBar ID="rpbSidebar" runat="server">
<Items>
<tel:RadPanelItem Text="Events" Value="Events">
<Items>
<tel:RadPanelItem Text="View All" Value="EventsView" NavigateUrl="~/Events.aspx" />
<tel:RadPanelItem Text="Schedule" Value="EventsSchedule" 
NavigateUrl="~/Events.aspx?action=schedule" />
</Items>
</tel:RadPanelItem>
<tel:RadPanelItem Text="Volunteers" Value="Volunteers">
<Items>
<tel:RadPanelItem Text="View All" Value="VolunteersView" 
NavigateUrl="~/Volunteers.aspx" />
<tel:RadPanelItem Text="Create New" Value="VolunteersCreate" 
NavigateUrl="~/Volunteers.aspx?action=create" />
</Items>
</tel:RadPanelItem>
</Items>
</tel:RadPanelBar>

While the RadPanelBar control is a recursive collection of RadPanelItem objects that makeup the user interface, in this example I kept the results shallow. Take a look at the result below.

Figure 1

In this example, I kept the hierarchy to two items, but it could have been nested three or four levels deep if desired. When that happens, an arrow appears next to the item (say View All, in this example) that the user can use to expand and collapse items.

Notice that each header can be expanded or collapsed at will. This is outside the norm of what you see in Outlook though. Only one item is shown at a time, while the others collapse. This mode is available through the ExpandMode property however; setting it to SingleExpandedItem collapses the previously selected selection.

Oftentimes, information comes from other sources like a database or XML file. In this case, I wanted to include binding from an XML file. XML is a good resource because IO processing is faster than accessing a database. To use an XML file as the underlying data source, the file can be loaded using the LoadContentFile method, as shown below.

Listing 2

this.rpbSidebar.LoadContentFile("~/App_Data/Sidebar.xml");

The XML that represents the data items is pretty simplistic. Check it out below; it uses the same structure as you see defined in the control (almost). Most of the properties can be defined for the RadPanelItem in the XML file; the names have to match for the property to be set correctly.

Listing 3

<PanelBar>
  <Item Text="Events" Value="Events" Expanded="true">
  <Item Text="View All" Value="EventsView" NavigateUrl="~/Events.aspx" />
  <Item Text="Schedule" Value="EventsSchedule"
  NavigateUrl="~/Events.aspx?action=schedule" />
 </Item>
  <Item Text="Volunteers" Value="Volunteers">
  <Item Text="View All" Value="VolunteersView" NavigateUrl="~/Volunteers.aspx" />
  <Item Text="Create New" Value="VolunteersCreate"
  NavigateUrl="~/Volunteers.aspx?action=create" />
 </Item>
</PanelBar>

Using this XML file, the structure created is the same as you see in the previous screenshot.

The RadRotator control is an advanced rotating control that does much more than advertisements, like its counterpart in the .NET Framework (AdRotator). The RadRotator uses a collection of RadRotatorItem objects to represent each item in the list. Each item can define its own template, but a common approach is to define an ItemTemplate property.

As with the .NET Framework, the template constitutes the interface for each item and could be an image, flash object, static text, form content, or any other type of content that you desire. Take a look at an example below that uses XPath statements to query content out of the XML file.

Listing 4

<tel:RadRotator id="rrNews" runat="server" ScrollDirection="Up" 
RotatorType="AutomaticAdvance" InitialItemIndex="0" DataSourceID="xdsNews" 
ScrollDuration="300" ItemWidth="200px" Width="210px" Height="200px" 
ItemHeight="30px">
<ItemTemplate>
<strong>
<a class="RotatorItem" href="<%# XPath("Url") %>" target='<%# 
(bool.Parse(XPath("NewWindow").ToString()) == true) ? "_blank" : "_self" %>'
> 
<%# XPath("Title")%></a>
</strong>
<br />
<span class="title">Starts:</span>
<span class="info"><%# XPath("PublishedDate")%></span>
<br />
</ItemTemplate>
<SlideShowAnimation Type="Fade" Duration="300" />
</tel:RadRotator>
<asp:XmlDataSource ID="xdsNews" runat="server" DataFile="~/App_Data/News.xml"
XPath="//Article" />

The RadRotator plugs into the existing data source control architecture and leverages what is already done by the .NET Framework, using the XmlDataSource control to pass the contents of the News.xml file to the RadRotator. The RadRotator supports a variety of types of transitions; in this example, I use the AutomaticAdvance option of rotating amongst all of the templates, but there are a variety of modes to choose from.

The template runs and looks like the following screenshots. Note that because I defined a template, this requires custom styling because it is not out of the box. I did not specify custom styles.

Figure 2

Above are screenshots taken at two separate instances. The content is within the current visible range of items. In the list there are about 14 items, but only 7 show at one given time. As the list fluctuates, because the list is data bound, this is easily accounted for. Here is a brief example of the content; I only show two entries to save space.

Listing 5

<NewsItems>
  <Article>
  <Title>New Web Site Coming Soon</Title>
  <TargetDate>1/10/2009</TargetDate>
  <Url>Default.aspx</Url>
  <NewWindow>True</NewWindow>
  <PublishedDate>11/1/2008</PublishedDate>
  </Article>
  <Article>
  <Title>Test</Title>
  <TargetDate>2/10/2009</TargetDate>
  <Url>UploadFile.aspx</Url>
  <NewWindow>True</NewWindow>
  <PublishedDate>11/1/2008</PublishedDate>
  </Article>
</NewsItems>

Each of these items translates to RadRotatorItem objects, with the content passed to the template of the RadRotatorItem. So the RadRotatorItem may not necessarily get any of this information passed to it, but it is simply used within the template.

To adjust how the rotator works, change some of the settings. For an example of how the control changes based upon settings, check out this example on the link.

A gotcha to be aware of: Each item is given a certain height and width. Based upon this information, the rotator control determines the size of each item and rotates them accordingly. If the height or width of the item is greater than the height or width of the rotator then it will not be rotated, so it is good to explicitly set these values).

ASP.NET 2.0 released the web parts framework, which is a framework that allows developers to create portal-based features in their applications. It allowed the user to minimize or maximize content, remove content from the window, or make it appear again. The data can be serialized to a database using the internal personalization framework, which persist the data to the asp.net tables.

To start with the docking framework, the docking container is defined using the RadDockLayout control. The RadDockLayout control wraps all the inner docking content together. I will explain the two events defined below later.

Listing 6

<tel:RadDockLayout ID="rdLayout" runat="server"   
onloaddocklayout="rdLayout_LoadDockLayout" 
onsavedocklayout="rdLayout_SaveDockLayout">
</tel:RadDockLayout>

To setup the docking sections in the form, I often use a table to do this. I use a table because it is easier to setup than to use floating panels, which although popular, can have some display challenges (like having the center content get pushed down below left and right columns). In this example, the content appears in a two-column table and is shown below with the docking zones defined.

Listing 7

<tel:RadDockLayout ID="rdLayout" runat="server" 
onloaddocklayout="rdLayout_LoadDockLayout" 
onsavedocklayout="rdLayout_SaveDockLayout">
<table cellspacing="0" border="0">
<thead>
<tr>
<th></th>
<th align="right">
<asp:Button ID="btnSave" runat="server" Text="Save" />
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<tel:RadDockZone ID="rdzLeftZone" runat="server" UniqueName="Left Zone"
HighlightedCssClass="DockHighlight">
</tel:RadDockZone>
</td>
<td>
                              
<tel:RadDockZone ID="rdzRightZone" runat="server" UniqueName="Right Zone"
HighlightedCssClass="DockHighlight">
</tel:RadDockZone>
</td>
</tr>
</tbody>
</table>
</tel:RadDockLayout>

The table creates a two-column page using two RadDockZone controls. The final output looks something like the following screenshot. Note the use of a save button; I left out the save button from the screenshot, but the save button allows the user to save the changes that they made to the UI. Like the web parts framework, Telerik's RadControls for ASP.NET AJAX provides the ability to let the user save changes they make to the database, and load them on the next page cycle. It is easier to do this in the RadControls framework than in the .NET Framework, as we will see soon.

Figure 3

Each of the three sections present (Welcome, Weather, and Sports) are defined as RadDock controls. RadDock controls represent each section that can be docked; it is analogous to the WebPart or GenericWebPart control (which the GenericWebPart wraps any control defined within a WebPartZone that does not implement IWebPart). The panels can be minimized, maximized, closed, resized (using a drag handle), or moved to a different RadDockZone, just like you can do in the web parts framework.

Listing 8

<tel:RadDock ID="rdSports" runat="server" DockMode="Docked" Title="Sports">
<ContentTemplate>
Your team lost, by a lot of points!
</ContentTemplate>
</tel:RadDock>

The RadDock control specifies the title of the docking section using the Title property, and the content of the docking section using the ContentTemplate property. These dock controls can be stacked within a RadDockZone.

Listing 9

<tel:RadDockZone ID="rdzLeftZone" runat="server" UniqueName="Left Zone"
HighlightedCssClass="DockHighlight">
<tel:RadDock ID="rdWelcome" runat="server" DockMode="Docked" Title="Welcome">
<ContentTemplate>
Welcome to the site, designated to learn about telerik and
it's controls.  I hope this site helps you understand
how to use telerik.
</ContentTemplate>
</tel:RadDock>
<tel:RadDock ID="rdWeather" runat="server" DockMode="Docked" Title="Weather">
<ContentTemplate>
It's raining all day, potential 
</ContentTemplate>
</tel:RadDock>
</tel:RadDockZone>

Built into the docking is the ability to drag and drop these docking controls across zones. This is built in for the user so that they can rearrange the page as they see fit. Check out the screenshot below; in this example, I am dragging the weather section from the left pane to the right pane.  Telerik's RadControls give the user a nice look.

Figure 4

Notice the light yellow background where the weather section will be dropped into (highlighted by the light yellow background). This is specified by the HighlightedCssClass name property defined for the RadDockZone control.

Loading and Saving Content

The RadDockLayout persists changes made by the user by using events. These two events, LoadDockContent and SaveDockContent, load and save the content of the changes using a customized scheme. The code to load/save events looks like the following:

Listing 10

protected void rdLayout_LoadDockLayout(object sender, Telerik.Web.UI.DockLayoutEventArgs e)
{
  if (Session["DockContent"] == null)
  return;
  string[] content = (string[]) Session["DockContent"];
  JavaScriptSerializer serializer = new JavaScriptSerializer();
  e.Indices = serializer.Deserialize<Dictionary<string, int>>(content[0]);
  e.Positions = serializer.Deserialize<Dictionary<string, string>>(content[1]);
}
 
protected void rdLayout_SaveDockLayout(object sender, Telerik.Web.UI.DockLayoutEventArgs e)
{
  JavaScriptSerializer serializer = new JavaScriptSerializer();
  string indices = serializer.Serialize(e.Indices);
  string positions = serializer.Serialize(e.Positions);
  Session["DockContent"] = new[] { indices, positions };
}

For now, the code uses the session to load/save the docking layout. Telerik's RadDock requires a collection of indices and positions to reload the docking layout. This is essentially a listing of docking layout containers and their indices/positions (index 0 in the right dock container). The JavaScript serializer is used to serialize the collections to a more meaningful format because these two collections stored in the DockLayoutEventArgs event argument are actually generic dictionaries.  These are perfect for serialization and deserialization.

While debugging, the indices looks like the following in the dictionary, while saving the docking content.

Figure 5

The positions, however, look alternatively alike.

Figure 6

And so, these dictionaries contain important information for us to use. When loading, the code converts the serialized string in JSON format equivalent back to dictionaries. These strings look like:

Indices: {\"rdWelcome\":0,\"rdWeather\":1,\"rdSports\":0}

Positions: {\"rdWelcome\":\"ctl00_body_rdzLeftZone\",\"rdWeather\":\"ctl00_body_rdzLeftZone\",\"rdSports\":\"ctl00_body_rdzRightZone\"}

The JavaScriptSerializer object then deserializes the content back into the dictionary for the Docking layout to use.

The RadControls from Telerik is a great set of components to develop an interactive site. It has a lot of building blocks for developing web sites, a few that we examined here. Before any developer can develop a site, it is important to know what goes on behind the scenes to make it work, and I hope I was able to shed some light on some useful controls. The PanelBar, Rotator, and Dock set of controls are very useful tools to add to any web site.

So far, the UI is not that compelling, but it is a lot better out-of-the-box than what it would have taken to develop otherwise.  Below is the main page for the test site. Remember that it is only test data, so I do not have any real content yet.

Figure 7

If you want to see Telerik's components in action, check out demos.telerik.com for more information and a live demo of all of the features I mentioned here.