HeaderTemplate Expanded/Collapsed icon

[Dan Lehmann]

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

[Dan Lehmann]

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

[Dan Lehmann]

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

[Kevin]

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.

[Dan Lehmann]

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

[Kevin]

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

[Rod]

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.

[Kate]

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