setting CSSClass for individual PanelBarItem

5 posts, 0 answers
  1. Robert O'Dell
    Robert O'Dell avatar
    26 posts
    Member since:
    May 2006

    Posted 01 Jun 2009 Link to this post

    I'm attempting to set the css class of an individual panelbaritem in codebehind

     

    RadPanelItem pnlItem3 = new RadPanelItem();

     

    pnlItem3.Text =

    "Include";

     

    pnlItem3.CssClass =

    "RedPanelItem";

     

    pnlItem2.Items.Add(pnlItem3);
    This is the third level on a panelbar.
    I've defined the style as below on the masterpage

     

     

    <style type="text/css">

     

     

    .RedPanelItem

     

     

     

     

    {

     

    color: red;

     

    }

     

    </style>

     


    But it comes up black and not red.
    I examined the source for the page and found the following, which I don't know if it helps or not
    <ul class="rpGroup rpLevel3 ">
    <li class="rpItem rpFirst"><a href="#" class="rpLink RedPanelItem"><span class="rpOut"><span class="rpText">Include</span></span></a></li><li class="rpItem rpLast"><a href="#" class="rpLink"><span class="rpOut"><span class="rpText">AL,CA,TX,UT</span></span></a></li>
    </ul>

    Can you help me out?
    Thanks,

  2. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 01 Jun 2009 Link to this post

    Hello Robert,

    Please find below your modified code snippet that works as expected.

    ASPX:
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head id="Head1" runat="server">  
        <title>Untitled Page</title> 
        <style type="text/css">  
            .myItem .rpText  
            {  
                color: red;  
            }  
        </style> 
    </head> 
    <body> 
        <form id="form1" runat="server">  
        <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
        <telerik:RadPanelBar ID="RadPanelBar1" runat="server">  
            <Items> 
                <telerik:RadPanelItem runat="server" Text="Root RadPanelItem1">  
                    <Items> 
                        <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 1">  
                        </telerik:RadPanelItem> 
                    </Items> 
                </telerik:RadPanelItem> 
            </Items> 
        </telerik:RadPanelBar> 
        </form> 
    </body> 
    </html> 

    using System;  
    using System.Collections.Generic;  
    using System.Linq;  
    using System.Web;  
    using System.Web.UI;  
    using System.Web.UI.WebControls;  
    using Telerik.Web.UI;  
     
    public partial class _Default : System.Web.UI.Page  
    {  
        protected void Page_Load(object sender, EventArgs e)  
        {  
            RadPanelItem pnlItem2 = (RadPanelItem)RadPanelBar1.FindItemByText("Child RadPanelItem 1");  
     
            RadPanelItem pnlItem3 = new RadPanelItem();  
            pnlItem3.Text = "Include";  
            pnlItem3.CssClass = "myItem";  
            pnlItem2.Items.Add(pnlItem3);  
        }  
    }  
     


    Sincerely yours,
    Paul
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. Robert O'Dell
    Robert O'Dell avatar
    26 posts
    Member since:
    May 2006

    Posted 01 Jun 2009 Link to this post

    Thank you.  Indeed it worked exactly as I wanted.  I would like to understand what I was missing.  I can see in the code that the span for the "INCLUDE" text was the .rpText -  Do I need to delve further into skins to understand that I'm modifying a skin?  Admittedly I'm not a CSS guru, but the structure .MyText .rpText as the class name surprised me - I have not seen that construct (guess I need to dig out the CSS books too!)
    Thanks for the solution.
  4. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 02 Jun 2009 Link to this post

    Hi Robert,

    Alternatively, you can use the !important clause to enforce the property.

    <style type="text/css">  
            .myItem  
            {  
                colorred !important;  
            }  
        </style> 


    Greetings,
    Paul
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  5. Robert O'Dell
    Robert O'Dell avatar
    26 posts
    Member since:
    May 2006

    Posted 02 Jun 2009 Link to this post

    I like that one!  I'll definitely remember that construct. 
    Thanks!
Back to Top