Radpanelbar header empty on collapse all items

3 posts, 1 answers
  1. Joris
    Joris avatar
    3 posts
    Member since:
    Jul 2012

    Posted 09 Jul 2013 Link to this post

    Hi to all,

    I have a radpanelbar with custom header templates and content templates.
    The expanding and collapsing is set to one max and allow all collapsed is true.
    It is all working fine until you collapse all items. At this point the header is empty until the same item or an other item is expanded. Then the header is back to normal again.
    The site is using a master page with radscriptmanager and RadAjaxManager.

    Here is the code, any help is greatly appreciated.
    There is no code-behind. With or without the radajaxmanagerproxcy does not matter.

    <telerik:RadPanelBar ID="RadPanelBar1" Width="1130px" runat="server" AllowCollapseAllItems="True" ExpandMode="SingleExpandedItem" Skin="Metro" ExpandAnimation-Duration="500">
            <Items>
                <telerik:RadPanelItem Expanded="false" >
     
                    <HeaderTemplate>
                        <asp:Table ID="Table1" runat="server" Width="100%">
                            <asp:TableRow>
                                <asp:TableCell Width="40%">
                                                History
                                </asp:TableCell>
                                <asp:TableCell Width="15%">
                                                1 month
                                </asp:TableCell>
                                <asp:TableCell Width="15%">
                                                6 months
                                </asp:TableCell>
                                <asp:TableCell Width="15%">
                                                1 year
                                </asp:TableCell>
                                <asp:TableCell Width="15%">
                                                for ever
                                </asp:TableCell>
                            </asp:TableRow>
                        </asp:Table>
                    </HeaderTemplate>
                    <ContentTemplate>
                        Description<br />
                        Description<br />
                        Description<br />
                        Description<br />
                        Description<br />
                        Description<br />
                        Description<br />
                    </ContentTemplate>
                </telerik:RadPanelItem>
                <telerik:RadPanelItem Expanded="false">
                    <HeaderTemplate>
                        <asp:Table ID="Table2" runat="server" Width="100%">
                            <asp:TableRow>
                                <asp:TableCell Width="40%">
                                                In-Browser Notifications
                                </asp:TableCell>
                                <asp:TableCell Width="15%">
                                                X
                                </asp:TableCell>
                                <asp:TableCell Width="15%">
                                                X
                                </asp:TableCell>
                                <asp:TableCell Width="15%">
                                                X
                                </asp:TableCell>
                                <asp:TableCell Width="15%">
                                                X
                                </asp:TableCell>
                            </asp:TableRow>
                        </asp:Table>
                    </HeaderTemplate>
                    <ContentTemplate>
                        Description<br />
                        Description<br />
                        Description<br />
                        Description<br />
                        Description<br />
                        Description<br />
                        Description<br />
                    </ContentTemplate>
                </telerik:RadPanelItem>
                <telerik:RadPanelItem Expanded="false">
                    <HeaderTemplate>
                        <asp:Table ID="Table3" runat="server" Width="100%">
                            <asp:TableRow>
                                <asp:TableCell Width="40%">
                                                Azure Monitoring (see below)
                                </asp:TableCell>
                                <asp:TableCell Width="15%">
                                                X
                                </asp:TableCell>
                                <asp:TableCell Width="15%">
                                                X
                                </asp:TableCell>
                                <asp:TableCell Width="15%">
                                                X
                                </asp:TableCell>
                                <asp:TableCell Width="15%">
                                                X
                                </asp:TableCell>
                            </asp:TableRow>
                        </asp:Table>
                    </HeaderTemplate>
                    <ContentTemplate>
                        Description<br />
                        Description<br />
                        Description<br />
                        Description<br />
                        Description<br />
                        Description<br />
                        Description<br />
                    </ContentTemplate>
                </telerik:RadPanelItem>
                <telerik:RadPanelItem Expanded="false">
                    <HeaderTemplate>
                        <asp:Table ID="Table4" runat="server" Width="100%">
                            <asp:TableRow>
                                <asp:TableCell Width="40%">
                                                Office 365 Monitoring
                                </asp:TableCell>
                                <asp:TableCell Width="15%">
                                                X
                                </asp:TableCell>
                                <asp:TableCell Width="15%">
                                                X
                                </asp:TableCell>
                                <asp:TableCell Width="15%">
                                                X
                                </asp:TableCell>
                                <asp:TableCell Width="15%">
                                                X
                                </asp:TableCell>
                            </asp:TableRow>
                        </asp:Table>
                    </HeaderTemplate>
                    <ContentTemplate>
                        Description<br />
                        Description<br />
                        Description<br />
                        Description<br />
                        Description<br />
                        Description<br />
                        Description<br />
                    </ContentTemplate>
                </telerik:RadPanelItem>
                <telerik:RadPanelItem Expanded="false">
                    <HeaderTemplate>
                        <asp:Table ID="Table5" runat="server" Width="100%">
                            <asp:TableRow>
                                <asp:TableCell Width="40%">
                                                On-Line Support trough support forum
                                </asp:TableCell>
                                <asp:TableCell Width="15%">
                                                X
                                </asp:TableCell>
                                <asp:TableCell Width="15%">
                                                X
                                </asp:TableCell>
                                <asp:TableCell Width="15%">
                                                X
                                </asp:TableCell>
                                <asp:TableCell Width="15%">
                                                X
                                </asp:TableCell>
                            </asp:TableRow>
                        </asp:Table>
                    </HeaderTemplate>
                    <ContentTemplate>
                        Description<br />
                        Description<br />
                        Description<br />
                        Description<br />
                        Description<br />
                        Description<br />
                        Description<br />
                    </ContentTemplate>
                </telerik:RadPanelItem>
                <telerik:RadPanelItem Expanded="false">
                    <HeaderTemplate>
                        <asp:Table ID="Table6" runat="server" Width="100%">
                            <asp:TableRow>
                                <asp:TableCell Width="40%">
                                                eMail Support
                                </asp:TableCell>
                                <asp:TableCell Width="15%">
                                                -
                                </asp:TableCell>
                                <asp:TableCell Width="15%">
                                                X
                                </asp:TableCell>
                                <asp:TableCell Width="15%">
                                                X
                                </asp:TableCell>
                                <asp:TableCell Width="15%">
                                                X
                                </asp:TableCell>
                            </asp:TableRow>
                        </asp:Table>
                    </HeaderTemplate>
                    <ContentTemplate>
                        Description<br />
                        Description<br />
                        Description<br />
                        Description<br />
                        Description<br />
                        Description<br />
                        Description<br />
                    </ContentTemplate>
                </telerik:RadPanelItem>
                <telerik:RadPanelItem Expanded="false">
                    <HeaderTemplate>
                        <asp:Table ID="Table7" runat="server" Width="100%">
                            <asp:TableRow>
                                <asp:TableCell Width="40%">
                                                eMail Event Notifications
                                </asp:TableCell>
                                <asp:TableCell Width="15%">
                                                -
                                </asp:TableCell>
                                <asp:TableCell Width="15%">
                                                X
                                </asp:TableCell>
                                <asp:TableCell Width="15%">
                                                X
                                </asp:TableCell>
                                <asp:TableCell Width="15%">
                                                X
                                </asp:TableCell>
                            </asp:TableRow>
                        </asp:Table>
                    </HeaderTemplate>
                    <ContentTemplate>
                        Description<br />
                        Description<br />
                        Description<br />
                        Description<br />
                        Description<br />
                        Description<br />
                        Description<br />
                    </ContentTemplate>
                </telerik:RadPanelItem>
                <telerik:RadPanelItem Expanded="false">
                    <HeaderTemplate>
                        <asp:Table ID="Table8" runat="server" Width="100%">
                            <asp:TableRow>
                                <asp:TableCell Width="40%">
                                                Reporting Users
                                </asp:TableCell>
                                <asp:TableCell Width="15%">
                                                -
                                </asp:TableCell>
                                <asp:TableCell Width="15%">
                                                1 User
                                </asp:TableCell>
                                <asp:TableCell Width="15%">
                                                5 Users
                                </asp:TableCell>
                                <asp:TableCell Width="15%">
                                                10 users
                                </asp:TableCell>
                            </asp:TableRow>
                        </asp:Table>
                    </HeaderTemplate>
                    <ContentTemplate>
                        Description<br />
                        Description<br />
                        Description<br />
                        Description<br />
                        Description<br />
                        Description<br />
                        Description<br />
                    </ContentTemplate>
                </telerik:RadPanelItem>
            </Items>
        </telerik:RadPanelBar>

    <telerik:RadAjaxManagerProxy ID="RadAjaxManager1" runat="server">
               <AjaxSettings>
                   <telerik:AjaxSetting AjaxControlID="RadPanelBar1">
                       <UpdatedControls>
                           <telerik:AjaxUpdatedControl ControlID="RadPanelBar1" UpdatePanelCssClass="" />
                       </UpdatedControls>
                   </telerik:AjaxSetting>
               </AjaxSettings>
           </telerik:RadAjaxManagerProxy>

  2. Answer
    A2H
    A2H avatar
    177 posts
    Member since:
    Mar 2010

    Posted 09 Jul 2013 Link to this post

    Hi,

    The issue resides with the “Metro” skin which you are using in your Rad Panel bar. 

    One suggestion is to override the metro skin css style.

     Add the following style to your page.

    <style type="text/css" >
           div.RadPanelBar_Metro a.rpFocused:hover,
            div.RadPanelBar_Metro div.rpFocused,
            div.RadPanelBar_Metro a.rpSelected,
            div.RadPanelBar_Metro a.rpSelected:hover,
            div.RadPanelBar_Metro div.rpSelected {
               color: #767676;
           }
    </style>

    Thanks,
    A2H
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Joris
    Joris avatar
    3 posts
    Member since:
    Jul 2012

    Posted 10 Jul 2013 Link to this post

    Thank you!
    It works like a charm.
    Thank you!
Back to Top