Setting different styles for each level of panel items

RELATED TO:

Article information

Article relates to

RadPanelBar v4.3.4.0

or

RadPanelBar for ASP.NET AJAX
(Telerik.Web.UI v2008.1.x)

Created by

Paul, Telerik

Last modified by

Simeon, Telerik

HOW-TO
Set different styles for each level of panel items in RadPanelBar.

DESCRIPTION
In number of cases it is mandatory to define different visualization settings for each level of panel items. RadPanelBar is powerful enough to accomplish this through CSS.

SOLUTION
You can customize the appearance of RadPanelBar using separate css class definitions for each level of items. All you need to do is build css classes in par with you particular requirements and refer to these css classed through the css style properties (CssClass, ExpandedCssClass, SelectedCssClass, etc.) of the corresponding panel items, for example:

ASPX
        <head runat="server"> 
            ..... 
            <link href="panelbar.css" rel="stylesheet" type="text/css" /> 
        </head> 
        ..... 
        <telerik:RadPanelbar ID="RadPanelbar1" runat="server"> 
            <Items> 
                <telerik:RadPanelItem  
                    runat="server"  
                    Text="root"  
                    CssClass="panelbarHeader" 
                    ExpandedCssClass="panelbarHeader" 
                    ClickedCssClass="panelbarHeader"> 
                    <Items> 
                        <telerik:RadPanelItem  
                            runat="server"  
                            Text="subroot" 
                            CssClass="panelbarItem" 
                            ExpandedCssClass="panelbarItem" 
                            ClickedCssClass="panelbarItem"> 
                            <Items> 
                                <telerik:RadPanelItem  
                                    runat="server"  
                                    Text="inner" 
                                    CssClass="panelbarInner" 
                                    ExpandedCssClass="panelbarInner" 
                                    ClickedCssClass="panelbarInner"> 
                                </telerik:RadPanelItem> 
                            </Items> 
                        </telerik:RadPanelItem> 
                    </Items> 
                </telerik:RadPanelItem> 
            </Items> 
        </telerik:RadPanelbar> 

CSS
.panelbarInner
{ 
    FONT-SIZE: 11px; 
    COLOR: green; 
    FONT-FAMILY: Arial,Verdana; 
    cursor: hand; 
    height: 25px; 
    padding-left: 90px; 
    padding-top: 6px; 
} 
 
.panelbarHeaderCollapsed 
{   
    FONT-SIZE: 11px; 
    COLOR: blue; 
    font-weight: bold; 
    FONT-FAMILY: Arial,Verdana; 
    cursor: hand; 
    height: 35px; 
    padding-left: 24px; 
} 
 
.panelbarItem 
{ 
    FONT-SIZE: 11px; 
    COLOR: red; 
    font-weight: bold; 
    FONT-FAMILY: Arial,Verdana; 
    cursor: hand; 
    text-decoration: none; 
    padding-left: 60px; 
    height: 24px; 
} 

You can also define your custom background/images for the panel items if you like (simply add them to the respective css class definitions).

More Resources

  • Forums

    Find answers to thousands of questions or reach out to our active community.

  • Demos

    Browse 1,200+ demos with source code covering basic and advanced scenarios.

  • Sample Applications

    Learn how to integrate the controls in real-world examples.

  • Feedback Portal

    Vote and follow the features you want to see added to Telerik UI for ASP.NET AJAX.

  • User Voice

    Get answers directly from the people who build the product.

  • Documentation

    Benefit from detailed help articles and API references for all controls.

  • Knowledge Base

    Learn how to achieve common scenarios from a multitude of tutorials and working examples.

  • Code Library

    Browse sample projects submitted by Telerik staff and community members.

  • Blog

    Stay up-to-date with the latest functionality, how-to articles and industry trends.

  • Release History

    Up-to-date release notes for all new features and improvements.