This is a migrated thread and some comments may be shown as answers.

Radpanelbar header empty on collapse all items

2 Answers 103 Views

PanelBar

This is a migrated thread and some comments may be shown as answers.

Joris asked on 09 Jul 2013, 09:11 AM

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

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

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

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

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

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

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

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

</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 Answers, 1 is accepted

Accepted

answered on 10 Jul 2013, 01:26 AM

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