Header template arrow icon not showing

3 posts, 0 answers
  1. Jaichand
    Jaichand avatar
    24 posts
    Member since:
    Jun 2011

    Posted 13 Feb 2013 Link to this post

    Hi,

    I am using RadPanelBar, My requirement is to  have some label in header and it can fill text by codebehind and the header  should be collapsible that other content can show after expanded.

    There is an issue with arrow icon is not displaying if I take HeaderTemplate otherwise displaying fine.

    I have done with collapsible/Expanded that is working fine to me.

    Please help me how can I show arrow icon on header if i have some server controls like labels on header.

    Please see the attached screen. I want arrow icon in second panel bar.

    Please have a look on my attached code that I have create for sample.


    Thanks.

    ---------------------

    <telerik:RadPanelBar ID="RadPanelBar1" runat="server" Width="104.1%" ExpandAnimation-Type="InCubic">
            <Items>
                <telerik:RadPanelItem Text="Search" Enabled="true" runat="server" Expanded="false" Font-Bold="true" Width="100%">
                    <Items>
                        <telerik:RadPanelItem Value="AdvanceSearch">
                            <ItemTemplate>
                                <table width="100%" border="0" cellspacing="1" cellpadding="1">
                                    <tr>
                                        <td style="width: 11.1%" >
                                            Test
                                        </td>
                                    </tr>
                                </table>
                            </ItemTemplate>
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelItem>
            </Items>
        </telerik:RadPanelBar>
        <br />
        <telerik:RadPanelBar ID="RadPanelBar2" runat="server" Width="100%" ExpandAnimation-Type="InCubic">
            <Items>
                <telerik:RadPanelItem Enabled="true" runat="server" Expanded="false" Font-Bold="true" Width="100%">
                    <HeaderTemplate>
                        <table width="100%" border="0">
                            <tr>
                                <td style="width: 10%">
                                    <asp:Label ID="Lb1" Text="T2456" runat="server"></asp:Label>
                                </td>
                                <td style="width: 10%">
                                    <asp:Label ID="Lb2" Text="Jack" runat="server"></asp:Label>
                                </td>
                                <td align="right" style="width: 10%">
                                    <asp:Label ID="LbAge" Text="Age:" runat="server"></asp:Label>
                                </td>
                                <td align="left">
                                    <asp:Label ID="Lb3" Text="46" runat="server"></asp:Label>
                                </td>
                            </tr>
                        </table>
                    </HeaderTemplate>
                    <Items>
                        <telerik:RadPanelItem Value="Preview">
                            <ItemTemplate>
                                <table>
                                    <tr>
                                        <td style="width: 10%">
                                            <asp:Label ID="Lb3" Text="User name" runat="server"></asp:Label>
                                        </td>
                                        <td align="left">
                                            <asp:TextBox runat="server" ID="Txt1">
                                            </asp:TextBox>
                                        </td>
                                    </tr>
                                </table>
                            </ItemTemplate>
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelItem>
            </Items>
        </telerik:RadPanelBar>
  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 18 Feb 2013 Link to this post

    Hi Jaichand,

    There is a major difference in the rendering of the control once you have the header template set to the RadPanelItem - a div element only is rendered. The case is very different when you have a simple RadPanelItem with no header template declared in the markup. One possible approach that you can use to get the expand/collapse handle appear when you have a header template is to set the needed css classes to a simple div and a span element as demonstrated below:
    <telerik:RadPanelBar runat="server" ID="RadPanelBar1">
                   <Items>
                       <telerik:RadPanelItem Text="Item1">
                           <HeaderTemplate>
                               <a class="rpExpandable">
                                   <span class="rpExpandHandle"></span>
                               </a>
                               <asp:Label Text="label1" ID="label1" runat="server"> </asp:Label>
                           </HeaderTemplate>
                           <Items>
                               <telerik:RadPanelItem Text="Item1">
                               </telerik:RadPanelItem>
                               <telerik:RadPanelItem Text="Item2">
                               </telerik:RadPanelItem>
                           </Items>
                       </telerik:RadPanelItem>
                       <telerik:RadPanelItem Text="Item2">
                           <Items>
                               <telerik:RadPanelItem Text="Item1">
                               </telerik:RadPanelItem>
                               <telerik:RadPanelItem Text="Item2">
                               </telerik:RadPanelItem>
                           </Items>
                       </telerik:RadPanelItem>
                      </Items>
               </telerik:RadPanelBar>
      
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jaichand
    Jaichand avatar
    24 posts
    Member since:
    Jun 2011

    Posted 18 Feb 2013 Link to this post

    Thank you very much.

      Its working fine to me.
Back to Top