HeaderTemplate Expanded/Collapsed icon

8 posts, 1 answers
  1. Dan Lehmann
    Dan Lehmann avatar
    103 posts
    Member since:
    May 2011

    Posted 21 Oct 2011 Link to this post

    I am including an expand/collapse all button in the header of my first PanelBar Item. How do I add back the default arrow button that shows up on the right for the default headers?

    Thanks,
    Dan
  2. Dan Lehmann
    Dan Lehmann avatar
    103 posts
    Member since:
    May 2011

    Posted 24 Oct 2011 Link to this post

    Found the answer I was looking for here: http://www.telerik.com/community/forums/aspnet-ajax/panelbar/controls-within-radpanelbaritem-header.aspx#1644075

    <HeaderTemplate>
        <div>
        <span class="rpText" style="float: left">Products</span>
        <span class="rpExpandHandle"></span>
        </div>
    </HeaderTemplate>

    The 2nd span, rpExpandHandle, was what I was missing.

    Thanks,
    Dan
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dan Lehmann
    Dan Lehmann avatar
    103 posts
    Member since:
    May 2011

    Posted 24 Oct 2011 Link to this post

    Ok, with this:

    <HeaderTemplate>
        <div>
        <span class="rpText" style="float:left">Products</span>
        <asp:CheckBox runat="server" ID="chk01" Text="Included" />
        <span class="rpExpandHandle"></span>
        </div>
    </HeaderTemplate>

    1. How do I get the rollover back where with the Default skin each bar changes from white to gray?
    2. How can I float the checkbox to the right but to the left of the ExpandHandle?

    Here I managed to float the checkbox but only the rpText is clickable to expand the section, so I've lost most of the clicktarget:
    <HeaderTemplate>
        <div>
            <span class="rpText" style="float:left">Products</span>
            <span style="float:right;">
                <asp:CheckBox runat="server" ID="chk01" Text="Included" />
                <span class="rpExpandHandle"></span>
            </span>
        </div>
    </HeaderTemplate>

    Any ideas would be appreciated.
    Thanks,
    Dan
  5. Answer
    Kevin
    Kevin avatar
    360 posts
    Member since:
    Jul 2012

    Posted 25 Oct 2011 Link to this post

    Hello Dan,

    The markup should look something like this:

    <style type="text/css">
            .customHeaderItem:hover
            {
                background-position: 0 -201px !important;
                cursor: pointer;
            }
    </style>
       
    <telerik:RadPanelBar ID="RadPanelBar1" runat="server">
            <Items>
                <telerik:RadPanelItem CssClass="customHeaderItem">
                    <HeaderTemplate>
                        <span class="rpOut"><span class="rpExpandHandle"></span>
                            <asp:CheckBox runat="server" ID="chk01" Text="Included" Style="float: right; padding-right: 2px;" />
                            <span class="rpText">Products</span> </span>
                    </HeaderTemplate>
                </telerik:RadPanelItem>
            </Items>
    </telerik:RadPanelBar>

    This should float the Expand/Collapse icon and the checkbox to the right of the text. The checkbox should appear to the left of the Expand/Collapse handle and you should get back the hover style.

    As you might have noticed, I added a customHeaderItem CssClass to get the hover to work. The reason for this is that when you use the HeaderTemplate, it no longer wraps the header inside of anchor tag and you can't add one as it will break the header. This is the only work-around I could think of.

    I hope that helps.
  6. Dan Lehmann
    Dan Lehmann avatar
    103 posts
    Member since:
    May 2011

    Posted 25 Oct 2011 Link to this post

    Thanks! That got me much further.
    To stop the section from expanding when the label or checkbox was clicked I added this javascript:

    <script type="text/javascript">
        $(document).ready(function () {
            $('.customHeaderItem input[type=checkbox], .customHeaderItem label').click(function (event) {
                event.stopPropagation();
            });
        });
    </script>

    Still 1 issue: I have many stacked PanelBarItems and the rollover sprite/box is a couple pixels too high so that when I'm hovering over the 2nd bar for example, it obscures the 1st PanelBarItem bottom border.

    Dan
  7. Kevin
    Kevin avatar
    360 posts
    Member since:
    Jul 2012

    Posted 26 Oct 2011 Link to this post

    Hello Dan,

    You can change the css I gave you to something like this (in this exact order for it to work):

    <style type="text/css">
            .rpItem .customHeaderItem:hover
            {
                background-position: 0 -200px !important;
                cursor: pointer;
            }
            .rpFirst .customHeaderItem:hover
            {
                background-position: 0 -201px !important;
                cursor: pointer;
            }
        </style>

    I hope that helps
  8. Rod
    Rod avatar
    2 posts
    Member since:
    Apr 2012

    Posted 16 Mar 2013 Link to this post

    This example works great. But, there's still one thing missing. A mouse over does not have any effect as in a default RadPanelItem. Specifically, the text and expand/collapse icon color (lime green), the expand/collapse icon background color (darken) and panel background (darker gradient) changes do not occur.

    Any help applying these to the custom header template would be greatly appreciated.
  9. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 21 Mar 2013 Link to this post

    Hello Rod,

    Since this post is quite an old one I would like to ask you to clarify the appearance that you are trying to achieve using the RadPanelBar control. Can you also paste the markup code that you are using so I can help you out in your particular case? In general the approach that you need to take is to get the correct css class selector (here you can find more details on the different css classes that are applied to the RadPanelBar control) and override the existing styles.

    All the best,
    Kate
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017