Changing Header Color to transaprent on page load

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

    Posted 25 Feb 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
    834 posts

    Posted 01 Mar 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
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top