This is a migrated thread and some comments may be shown as answers.

PanelItem Backcolor Problem

3 Answers 77 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
dhuss
Top achievements
Rank 1
dhuss asked on 09 Mar 2010, 07:04 PM
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.

3 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 11 Mar 2010, 12:17 PM
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
0
dhuss
Top achievements
Rank 1
answered on 11 Mar 2010, 04:00 PM
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.
0
Accepted
Yana
Telerik team
answered on 15 Mar 2010, 10:19 AM
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.
Tags
PanelBar
Asked by
dhuss
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
dhuss
Top achievements
Rank 1
Yana
Telerik team
Share this question
or