2009 Q2 AJAX RadPanelBar - Cannot collapse with databinding & template

3 posts, 0 answers
  1. rand1 rand1
    rand1 rand1 avatar
    1 posts
    Member since:
    Sep 2009

    Posted 22 Sep 2009 Link to this post

    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"><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"><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"><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> 

  2. Thomas Michael
    Thomas Michael avatar
    6 posts
    Member since:
    Jun 2009

    Posted 07 Dec 2009 Link to this post

    I have the exact same problem.

    Any help on this would be appreciated.

    Regards
    Thomas
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 10 Dec 2009 Link to this post

    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.
Back to Top