Getting Started Overview
This tutorial will walk you through creating a RadPanelBar (Accordion) and shows how to:
Use the RadPanelBar Item Builder to build a multi-level panel bar.
Apply a skin to the panel bar to change its look & feel.
Add a template to a panel bar item.
Set RadPanelBar properties.
Creating a panel bar using the RadPanelBar Item Builder
Drag a RadPanelBar component from the toolbox onto your Web page. The RadPanelBar Smart Tag should appear automatically:
On the Smart Tag, choose Build RadPanelBar. The RadPanelBar Item Builder appears:
Click the Add root item button (
) to add a root item to your panel bar.Set its Text property to "Mail".
-
With the "Mail" item selected, click the Add child item button (
) to add a child to your root item.- Select the child item and set its Text property to "In Box".
-
Select the "Mail" item again, and click the Add child item button twice to add two more child items.
Set the Text property of the first of these to "Deleted Items".
Set the Text property of the second of these to "Sent Items".
Click the Add root item button to add another root item. Set its Text property to "Calendar".
With the "Calendar" item selected, click the Add child item button to add a child item. Set its Text property to an empty string.
Click the Add root item button again to add a third root item. Set its Text property to "Notes".
-
Select the "Notes" item and click the Add child item button four times to add four child items.
Set the Text property of the first child item to "My Notes".
Set the Text property of the second child item "Shared Notes".
Set the Text property of the third child item to
<hr>and set its IsSeparator property to True.Set the Text property of the fourth child item to "Archive".
-
Select the "Archive" child item. With the Archive button selected, click the Add child item button twice to give the child item two child items of its own.
Set the Text property of the first child item to "My Notes"
Set the Text property of the second child item to "Shared Notes".
Click OK to confirm and exit.
Back in the RadPanelBar Smart Tag, use the Skin drop-down to change the skin for the RadPanelBar to "Outlook". The appearance of the RadPanelBar in the designer changes to reflect the new skin:
In the RadPanelBar Smart Tag, click the Edit Templates link.
The Smart Tag switches to template editing mode. From the Display drop-down, select the template for the child item of the "Calendar" item:
Drag a RadCalendar control from the toolbox onto the Template Design Surface. Set its Skin property to "Outlook" to match the panel bar:
Click on the RadPanelBar Smart Tag anchor to display its Smart Tag again, and choose End Template Editing:
Right click on the RadPanelBar, and from its context menu, choose Properties.
-
In the Behavior section of the properties pane:
Expand the ExpandAnimation property and set the Type to "InOutBounce". This introduces an animated effect when items are expanded.
Set the ExpandMode property to "SingleExpandedItem". This specifies that only one item can be expanded at a time.
Run the application. Click on the panel bar items to expand them. Note the animated effect. When you expand the "Calendar" item, the template displays:
When you click the Notes item, the second level of items appears. You can then click on the "Archive" item to display the third level of items:
