Changing Header Color to transaprent on page load

[L]

hi

 

I have all the items expanded during page load, but i need to also change the background color of the parent items to transparent. How should i go about it? This is my code. Thanks

  if (!IsPostBack)
                {
                    foreach (RadPanelItem item in RadPanelBar1.GetAllItems())
                    {
                        if (item.Items.Count > 0)
                        {
                            item.Expanded = true;

                        }
                    }

                }

[Ivan Danchev]

Hello,

In order to make the item's background color transparent you can set a CssClass to the item:

item.CssClass = "panelBarExpanded";

and add these two CSS rules, one of which uses the custom CSS class in the selector:

html .RadPanelBar {
    background: none;
}

html .RadPanelBar .rpRootGroup .rpItem .panelBarExpanded {
    background-color: transparent;
    background-image: none;
}

The problem with this approach is that once added to the item in the code-behind, the class will remain, i.e. if you collapse the expanded item it will still be transparent. Whereas, if you want the item to be transparent only if it is expanded and to return to normal when it is collapsed you could use our own "rpExpanded" class, which is automatically added/removed on expand/collapse. Applying styles to items with the "rpExpanded" class can be done directly with a CSS rule, setting the class in the code-behind will not be needed:

html .RadPanelBar {
    background: none;
}

html .RadPanelBar .rpRootGroup .rpItem .rpExpanded {
    background-color: transparent;
    background-image: none;
}

Regards,
Ivan Danchev
Telerik