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.