Changing Header Color to transaprent on page load

2 posts, 1 answers
  1. L
    L avatar
    296 posts
    Member since:
    Apr 2008

    Posted 25 Feb 2016 Link to this post

    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;

                            }
                        }

                    }

  2. Answer
    Ivan Danchev
    Admin
    Ivan Danchev avatar
    873 posts

    Posted 01 Mar 2016 Link to this post

    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
    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 Feedback Portal and vote to affect the priority of the items
Back to Top