Building Web Sites with Telerik RadControls - Part 1
page 3 of 6
by Brian Mains
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 43048/ 59

PanelBar

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.


View Entire Article

User Comments

Title: Mr   
Name: Andrew Goodall
Date: 2009-03-18 8:45:38 AM
Comment:
Great helped me and I am planning on editing your demo Sitefinity






Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2024 ASPAlliance.com  |  Page Processed at 2024-03-28 10:30:32 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search