2009 Q2 AJAX RadPanelBar - Cannot collapse with databinding & template

[rand1 rand1]

Using 2009 Q2 AJAX RadPanelBar, the panel bar from following code cannot collapse or expand.  I have read the article about putting the actual content into the child node and I did.  It seems like the HTML code rendered is exactly the same as the demo code's HTML structure, with the only difference is the rendered code is missing the "rpExpandable" in the CSS class attribute of the link element within the li element.

Please help. Thanks.

aspx Code:

                        <telerik:RadPanelBar ID="rpOrderTree" runat="server" ExpandMode="MultipleExpandedItems" DataSourceID="ObjectDataSource1" DataTextField="branch_short_desc" DataValueField="branch_code" Width="800" DataFieldID="branch_code" AllowCollapseAllItems="True" AppendDataBoundItems="True" CausesValidation="True" EnableEmbeddedSkins="False" EnableTheming="False" EnableViewState="False" RegisterWithScriptManager="True">
                            <ItemTemplate>
                                <items>
                                    <telerik:RadPanelItem text="">
                                        <itemtemplate>
                                            <asp:RadioButtonList ID="rblOptions" runat="server" AutoPostBack="true" OnTextChanged="OptionsCommand" DataSource='<%# CreateDataSourceOptions(DataBinder.Eval(Container.DataItem, "product_code"), DataBinder.Eval(Container.DataItem, "branch_code")) %>' DataTextField="leaf_desc" DataValueField="leaf_code" Font-Size="Medium" RepeatDirection="Vertical" RepeatLayout="Flow"></asp:RadioButtonList>
                                        </itemtemplate>
                                    </telerik:RadPanelItem>
                                </items>
                            </ItemTemplate>
                        </telerik:RadPanelBar>

Rendered HTML by above RadPanelBar

<div id="rpOrderTree" class="RadPanelBar RadPanelBar_Default " style="width:800px;">
    <ul class="rpRootGroup">
        <li class="rpItem rpFirst"><a href="#" class="rpLink"><span class="rpOut"><span class="rpText">Series</span></span></a><div class="rpTemplate">

                                <items>
                                    <telerik:RadPanelItem text="">
                                        <itemtemplate>
                                            <span id="rpOrderTree_i0_rblOptions" style="font-size:Medium;font-size: 80%;"><input id="rpOrderTree_i0_rblOptions_0" type="radio" name="rpOrderTree$i0$rblOptions" value="" onclick="javascript:setTimeout('__doPostBack(\'rpOrderTree$i0$rblOptions$0\',\'\')', 0)" /><label for="rpOrderTree_i0_rblOptions_0">Unspecified</label><br /><input id="rpOrderTree_i0_rblOptions_1" type="radio" name="rpOrderTree$i0$rblOptions" value="AAA" onclick="javascript:setTimeout('__doPostBack(\'rpOrderTree$i0$rblOptions$1\',\'\')', 0)" /><label for="rpOrderTree_i0_rblOptions_1">AAA</label><br /><input id="rpOrderTree_i0_rblOptions_2" type="radio" name="rpOrderTree$i0$rblOptions" value="BBB" onclick="javascript:setTimeout('__doPostBack(\'rpOrderTree$i0$rblOptions$2\',\'\')', 0)" /><label for="rpOrderTree_i0_rblOptions_2">BBB</label></span>
                                        </itemtemplate>
                                    </telerik:RadPanelItem>
                                </items>

        </div></li>

HTML rendered by AJAX RadPanelBar DEMO with ItemTemplate - Note the rpExpandable in class of the <a ...> element.

<div id="RadPanelBar1" class="RadPanelBar RadPanelBar_Default " style="height:280px;width:750px;">
    <!-- 2009.2.701.35 --><ul class="rpRootGroup">
        <li class="rpItem rpFirst"><a href="#" class="rpLink rpExpandable"><span class="rpOut"><span class="rpText">Customer testmonials</span></span></a><div class="rpSlide">
            <ul class="rpGroup rpLevel1 ">
                <li class="rpItem rpFirst rpLast"><div class="rpTemplate">

                                                <div>11111</div>

                </div></li>
            </ul>
        </div></li><li class="rpItem rpLast"><a href="#" class="rpLink rpExpandable"><span class="rpOut"><span class="rpText">How to find us</span></span></a><div class="rpSlide">
            <ul class="rpGroup rpLevel1 ">
                <li class="rpItem rpFirst rpLast"><div class="rpTemplate">

                                                <div>22222</div>

                </div></li>
            </ul>
        </div></li>
    </ul>

[Thomas Michael]

I have the exact same problem.

Any help on this would be appreciated.

Regards

Thomas

[Yana]

Hello,

Your rendered html shows that the template is on the root item, please check again the html from the online demo:

<ul class="rpGroup rpLevel1 ">
       <li class="rpItem rpFirst rpLast"><div class="rpTemplate">

in your case "rpGroup" class is missing.

Kind regards,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.