New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Custom CSS Classes

  • Custom expanded class
    • Custom Css Class
    • Custom Css Class
  • Custom selected class
    • Custom Css Class
    • Custom Css Class
  • Custom disabled class
    • Custom Css Class
    • Custom Css Class

RadPanelBar items expose CSS properties that can be used to customize the appearance of the panel items.
The CSS properties that can be used with the panel items are:



CssClass
ClickedCssClass
FocusedCssClass
SelectedCssClass

This example shows how you can use all these CSS properties to apply different CSS classes to the items.

  • DefaultCS.aspx
  • styles.css
<%@ Page Inherits="Telerik.QuickStart.QsfPage"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-thin">
        <telerik:RadPanelBar RenderMode="Lightweight" runat="server" ID="RadPanelBar1" Width="100%">
            <Items>
                <telerik:RadPanelItem Expanded="True" Text="Custom expanded class" ExpandedCssClass="ExpandedCssClass">
                    <Items>
                        <telerik:RadPanelItem Text="Custom Css Class" CssClass="CustomCssClass1" />
                        <telerik:RadPanelItem Text="Custom Css Class" CssClass="CustomCssClass2" />
                    </Items>
                </telerik:RadPanelItem>
                <telerik:RadPanelItem Text="Custom selected class" ClickedCssClass="ClickedCssClass"
                    FocusedCssClass="FocusedCssClass" SelectedCssClass="SelectedCssClass" Selected="true">
                    <Items>
                        <telerik:RadPanelItem Text="Custom Css Class" CssClass="CustomCssClass1" />
                        <telerik:RadPanelItem Text="Custom Css Class" CssClass="CustomCssClass2" />
                    </Items>
                </telerik:RadPanelItem>
                <telerik:RadPanelItem Text="Custom disabled class" Enabled="false" DisabledCssClass="DisabledCssClass">
                    <Items>
                        <telerik:RadPanelItem Text="Custom Css Class" CssClass="CustomCssClass1" />
                        <telerik:RadPanelItem Text="Custom Css Class" CssClass="CustomCssClass2" />
                    </Items>
                </telerik:RadPanelItem>
            </Items>
        </telerik:RadPanelBar>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance