To change the panelbar appearance, you may sometimes need to go beyond the exposed appearance properties and change the CSS file that represents the skin. Therefore, it is important to understand the HTML structure of the panelbar.
For its larger part, the rendered HTML structure is apparent if you view the generated source. However, additional HTML elements are inserted at the initialization of the JavaScript panelbar client object. The easiest way to demonstrate what goes on is by example.
Example
Section 1: The ASP.NET definition
Below is a simple panelbar definition:
- The panelbar has three items.
- The first two items have one child each.
- The last item is disabled.
| |
 Copy Code |
|
<rad:radpanelbar Runat="server" ID="RadPanelBar2" Skin="System" CssClass="MyPanelBar">
<Items>
<rad:RadPanelItem Expanded="true" Text="Root Item 1" CssClass="item1">
<Items>
<rad:RadPanelItem Text="Child Item"></rad:RadPanelItem>
</Items>
</rad:RadPanelItem>
<rad:RadPanelItem Text="Root Item 2" CssClass="item2">
<Items>
<rad:RadPanelItem Text="Child Item"></rad:RadPanelItem>
</Items>
</rad:RadPanelItem>
<rad:RadPanelItem Enabled="False" Text="Root Item 3" CssClass="item3"></rad:RadPanelItem>
</Items>
</rad:radpanelbar> |
Section 2: Rendered HTML output
When rendered, the definition produces the output listed below.
 |
Both the JavaScript code and the hidden input preserving the state of the controls are removed from the code below. They are irrelevant for our purpose. |
| |
Copy Code |
|
<div id="RPB2" class="panelbar RadPanelBar_System MyPanelBar">
<span id="RadPanelBar2StyleSheetHolder" style="display: none;"></span>
<ul class="rootGroup">
<li class="item first"><a href="#" id="RPB2_p0" class="link item1"><span
class="text">Root Item 1</span></a>
<div class="slide" style="display: block;">
<ul class="group level1 " style="display: block;">
<li class="item first">
<a href="#" id="RPB2_p0_p0" class="link">
<span class="text">Child Item</span>
</a>
</li>
</ul>
</div>
</li>
<li class="item"><a href="#" id="RPB2_p1" class="link item2"><span class="text">
Root Item 2</span></a>
<div class="slide">
<ul class="group level1 ">
<li class="item first">
<a href="#" id="RPB2_p1_p0" class="link">
<span class="text">Child Item</span>
</a>
</li>
</ul>
</div>
</li>
<li class="item last">
<a href="#" id="RPB2_p2" disabled="disabled" class="link item3 disabled">
<span class="text">Root Item 3</span>
</a>
</li>
</ul>
<input type="hidden" id="RPB2_Hidden" name="RPB2" />
</div> |
The control is rendered as a DIV element, and the item hierarchy is presented as nested unordered lists with links inside. This, by far, is the most natural and semantic way to represent a navigation element with the existing HTML tags toolbox.
See Also