Description of the states:
- FocusedCssClass = "focused";
You can bring the focus to a panelbar item by tabbing to the item, clicking over it, or using an Access Key.
- ExpandedCssClass = "expanded";
This state is assumed when the child items of the panelbar item are expanded.
- DisabledCssClass = "disabled";
This state is assumed when Enabled="False" for the panelbar item.
- ClickedCssClass = "clicked";
This state is assumed when the panelbar item is clicked.
- SelectedClass = "selected";
This state is assumed when the panelbar item is selected.
How styles are applied for various states
By default, the states of the panelbar items are controlled by the default values of the ClickedCssClass, CssClass DisabledCssClass, SelectedClass, ExpandedCssClass, and FocusedCssClass:
CSS:
The styles are defined in the css file (RadControls/panelbar/Skins/[SkinName]/styles.css). For example:
| |
 Copy Code |
|
.RadPanelBar_Outlook .rootGroup .focused,
.RadPanelBar_Outlook .rootGroup .link:hover
{
background:#FFD59A url(Img/RootItemFocusedBkg.gif) left top repeat-x;
border:1px solid #002D96;
} |
Tweaking the look of a state
We will show how to tweak the look of the focused state for example.
Suppose that you are using the Outlook skin. The following steps will tweak the default look:
1. Define your custom style for the focused state either in the css file of the Outlook skin or in the head tag of the aspx page:
| |
Copy Code |
|
<head runat="server">
<style type="text/css">
.customFocused
{
background-color:Red;
border:1px solid #002D96;
}
</style>
</head> |
2. Set the FocusedCssClass for the panelbar item:
| |
Copy Code |
|
<rad:RadPanelItem runat="server" Text="This" FocusedCssClass="customFocused">
</rad:RadPanelItem> |