Expanded property has no effect when using HeaderTemplate

[Dan Lehmann]

I have added a checkbox to some of my RadPanelItems using the HeaderTemplate and css. If I set the property Expanded="true" on an Item it doesn't expand. It also doesn't expand if I set the property in my codebehind with for example:
RadPanelBar1.Items(1).Expanded = True

Here is my aspx:

<style type="text/css">
     .rpItem .customHeaderItem:hover{
        background-position: 0 -200px !important;
        cursor: pointer;
    }
    .rpFirst .customHeaderItem:hover{
        background-position: 0 -201px !important;
        cursor: pointer;
    }
    .ItemCheckbox{
        float: right;
        padding-right: 10px;
    }
    label{
        font-style:normal;
        font-weight:normal;
    }
</style>

<telerik:RadPanelBar runat="server" ID="RadPanelBar1" Width="100%" Skin="Default" ExpandMode="MultipleExpandedItems">
    <Items>

        <telerik:RadPanelItem CssClass="customHeaderItem" Expanded="true">
            <HeaderTemplate>
                <span class="rpOut">
                    <span class="rpExpandHandle"></span>
                    <asp:CheckBox runat="server" ID="chkIncludeItem1" Text="Include" Checked="true" CssClass="ItemCheckbox" />
                    <span class="rpText">Panel Item 1</span>
                </span>
            </HeaderTemplate>
            <ContentTemplate>
                <p>Content....</p>
            </ContentTemplate>
        </telerik:RadPanelItem>

        <telerik:RadPanelItem CssClass="customHeaderItem">
            <HeaderTemplate>
                <span class="rpOut">
                           <span class="rpExpandHandle"></span>
                    <asp:CheckBox runat="server" ID="chkIncludeItem2" Text="Include" Checked="true" CssClass="ItemCheckbox" />
                    <span class="rpText">Panel Item 2</span>
                      </span>
            </HeaderTemplate>
            <ContentTemplate>
                <p>Content....</p>
            </ContentTemplate>
        </telerik:RadPanelItem>

    </Items>
</telerik:RadPanelBar>

Without a HeaderTemplate it works as expected:

<telerik:RadPanelBar runat="server" ID="RadPanelBar2" Width="50%" SkinID="Default" ExpandMode="MultipleExpandedItems">
    <Items>
        <telerik:RadPanelItem Text="Item 1" Expanded="true">
            <ContentTemplate>
                <p>Content...</p>
            </ContentTemplate>
        </telerik:RadPanelItem>
        <telerik:RadPanelItem Text="Item 2">
            <ContentTemplate>
                <p>Content...</p>
            </ContentTemplate>
        </telerik:RadPanelItem>
    </Items>

</telerik:RadPanelBar>

What am I doing wrong?

Thanks,
Dan

[Kate]

Hi Dan,

The issue that you encounter is a bug of the RadPanelBar that we are already aware of. It is alreagy logged in our internal system, so that our development team could fix it. 

Kind regards,
Kate
the Telerik team

[Dan Lehmann]

I found that if I set the Text field for the Items it solves the problem. I now prefer to expand the items with javascript:

Working aspx:

<telerik:RadScriptBlock runat="server" ID="RadScriptBlock1">
<script type="text/javascript">

    function expandItem(text) {
        var panelBar = $find("<%= RadPanelBar1.ClientID %>");
        var item = panelBar.findItemByText(text);
        if (item) {
            item.expand();
        }
        else {
            alert("Item with text '" + text + "' not found.");
        }
    }

    function collapseItem(text) {
        var panelBar = $find("<%= RadPanelBar1.ClientID %>");
        var item = panelBar.findItemByText(text);
        if (item) {
            item.collapse();
        }
        else {
            alert("Item with text '" + text + "' not found.");
        }
    }

</script>
</telerik:RadScriptBlock>
<style type="text/css">
     .rpItem .customHeaderItem:hover{
        background-position: 0 -200px !important;
        cursor: pointer;
    }
    .rpFirst .customHeaderItem:hover{
        background-position: 0 -201px !important;
        cursor: pointer;
    }
    .ItemCheckbox{
        float: right;
        padding-right: 10px;
    }
    label{
        font-style:normal;
        font-weight:normal;
    }
</style>

<telerik:RadPanelBar runat="server" ID="RadPanelBar1" Width="100%" Skin="Default" ExpandMode="MultipleExpandedItems">
    <Items>

        <telerik:RadPanelItem CssClass="customHeaderItem" Text="Panel Item 1">
            <HeaderTemplate>
                <span class="rpOut">
                    <span class="rpExpandHandle"></span>
                    <asp:CheckBox runat="server" ID="chkIncludeItem1" Text="Include" Checked="true" CssClass="ItemCheckbox" />
                    <span class="rpText">Panel Item 1</span>
                </span>
            </HeaderTemplate>
            <ContentTemplate>
                <p>Content....</p>
            </ContentTemplate>
        </telerik:RadPanelItem>

        <telerik:RadPanelItem CssClass="customHeaderItem" Text="Panel Item 2">
            <HeaderTemplate>
                <span class="rpOut">
                           <span class="rpExpandHandle"></span>
                    <asp:CheckBox runat="server" ID="chkIncludeItem2" Text="Include" Checked="true" CssClass="ItemCheckbox" />
                    <span class="rpText">Panel Item 2</span>
                      </span>
            </HeaderTemplate>
            <ContentTemplate>
                <p>Content....</p>
            </ContentTemplate>
        </telerik:RadPanelItem>

    </Items>
</telerik:RadPanelBar>

VB:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    AddJavascript("expandItem('Panel Item 1');expandItem('Panel Item 2');")
End Sub
Private Sub AddJavascript(ByVal script As String)
    DirectCast(Me.Parent.FindControl("RadAjaxManager1"), Telerik.Web.UI.RadAjaxManager).ResponseScripts.Add(script)
End Sub

Dan

[Kate]

Hi Dan,

Indeed the issue occurs when you are using the server-side property and the approach that you apply (using client-side) is very suitable for achieving this behavior.

Kind regards,
Kate
the Telerik team