Header template arrow icon not showing

[Jaichand]

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>

[Kate]

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

[Jaichand]

Thank you very much.

  Its working fine to me.