PanelItem Backcolor Problem

4 posts, 1 answers
  1. dhuss
    dhuss avatar
    120 posts
    Member since:
    Sep 2009

    Posted 09 Mar 2010 Link to this post

    I have setup a radPanel with 3 panel items. No skin is set and each item has its backcolor set to a light gray (#eeeeee). When an item is clicked, the color goes from light grey to dark grey. If the item is collasped, the color stays dark gray. How do I get the backcolor for the item to go back to light grey. I have tried using the item click event and set the backcolor to the color I want when the "Expanded" property = false. The code fires but the color never changes. I also tried creating a css and assigning the cssclass and that didn't work either. What am I doing wrong?

    This is my ItemClick code.
        Private Sub radPanelBar1_ItemClick(ByVal sender As Object, ByVal e As Telerik.Web.UI.RadPanelBarEventArgs) Handles radPanelBar1.ItemClick  
     
            If e.Item.Expanded = False Then  
                e.Item.BackColor = System.Drawing.ColorTranslator.FromHtml("#eeeeee")  
            End If  
     
        End Sub 
     
    This is the shell for the PanelBar
    <telerik:RadPanelBar ID="radPanelBar1" runat="server" Width="100%" ExpandMode="SingleExpandedItem" AllowCollapseAllItems="true">  
        <Items> 
           <telerik:RadPanelItem Text="Primary Subscriber's Provider Details" CssClass="gridLabelText" 
                    Font-Bold="true" Font-Underline="false" BackColor="#eeeeee" ForeColor="#996699">  
                 <Items> 
                    <telerik:RadPanelItem> 
                        <ItemTemplate> 
     
    Each panel item contains a table with multiple hyperlinks.
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 11 Mar 2010 Link to this post

    Hi,

    Please have a look at the design and code I have implemented and see if this matches your requirement.

    ASPX:
        <telerik:RadPanelBar ID="radPanelBar1" runat="server" Width="100%" Skin="" ExpandMode="SingleExpandedItem" 
            AllowCollapseAllItems="true" onitemclick="radPanelBar1_ItemClick"
            <Items> 
                <telerik:RadPanelItem Text="Primary Subscriber's Provider Details" CssClass="gridLabelText" 
                    Font-Bold="true" Font-Underline="false" BackColor="Red"   ForeColor="#996699"
                    <Items> 
                        <telerik:RadPanelItem> 
                            <ItemTemplate> 
                                Hello 
                            </ItemTemplate> 
                        </telerik:RadPanelItem> 
                    </Items> 
                </telerik:RadPanelItem> 
            </Items> 
        </telerik:RadPanelBar> 

    C#
      protected void radPanelBar1_ItemClick(object sender, Telerik.Web.UI.RadPanelBarEventArgs e) 
        { 
            if (e.Item.Expanded == false
                e.Item.BackColor = System.Drawing.Color.Red; 
            else 
                e.Item.BackColor = System.Drawing.Color.Gray; 
        } 


    Princy
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. dhuss
    dhuss avatar
    120 posts
    Member since:
    Sep 2009

    Posted 11 Mar 2010 Link to this post

    I tried your suggestion and it doesn't work either. The code runs on both methods, using the "onitemclick" in html or the item.click event. The backcolor is set, but it never takes.
  5. Answer
    Yana
    Admin
    Yana avatar
    4554 posts

    Posted 15 Mar 2010 Link to this post

    Hello,

    Please set CssClass and ExpandedCssClass propertied like this:

    <telerik:RadPanelBar ID="radPanelBar2" runat="server" Width="100%" ExpandMode="SingleExpandedItem"
        AllowCollapseAllItems="true" Skin="">
        <Items>
            <telerik:RadPanelItem Text="Primary Subscriber's Provider Details" CssClass="gridLabelText" ExpandedCssClass="gridLabelTextExpanded"
                Font-Bold="true" Font-Underline="false"  ForeColor="#996699">
                <Items>
                    <telerik:RadPanelItem>
                        <ItemTemplate>


    and add the following css styles to your page:

    <style type="text/css">
         .RadPanelBar .gridLabelText
        {
            background-color: Red;
        }
         
        .RadPanelBar .gridLabelTextExpanded
        {
            background-color: Green;
        }      
    </style>


    Kind regards,
    Yana
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Back to Top