Multiple panels with and without skins

[Matt]

I have a page that contains a menu using a RadPanelBar and a site map and for this I don't want to use a Skin, instead I want to use my own CSS, so i turned EnableEmbeddedSkins and EnableEmbeddedBaseStylesheet to "false" (see below for code):

                    <asp:SiteMapDataSource ID="MemberSiteMap" SiteMapProvider="MemberSiteMap" ShowStartingNode="false" runat="server" />

                    <telerik:RadPanelBar ID="MemberNavigation" runat="server" Width="200" AllowCollapseAllItems="true" ExpandMode="SingleExpandedItem"
                        DataNavigateUrlField="Url" PersistStateInCookie="false" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false" DataSourceID="MemberSiteMap" EnableViewState="false"
                        DataTextField="Title" CssClass="navigation">
                        <CollapseAnimation Type="None" Duration="100"></CollapseAnimation>
                        <ExpandAnimation Type="None" Duration="100"></ExpandAnimation>
                    </telerik:RadPanelBar>
                   
I have another RadPanel in a user control that uses the "Default" skin (see below code):

<telerik:RadPanelBar ID="BrowseResults" runat="server" AllowCollapseAllItems="true" EnableEmbeddedSkins="true" EnableEmbeddedBaseStylesheet="true" EnableViewState="false" ExpandMode="MultipleExpandedItems" Width="215px" OnClientItemClicking="OnClientItemClicking">
            <CollapseAnimation Type="None" Duration="100"></CollapseAnimation>
            <ExpandAnimation Type="None" Duration="100"></ExpandAnimation>
            <Items>            
                <telerik:RadPanelItem Text="Filter by event type" Value="EventTypes" CssClass="filterTitle" EnableViewState="false">
                    <Items>
                        <telerik:RadPanelItem Text="Loading..."></telerik:RadPanelItem>
                    </Items>                
                </telerik:RadPanelItem>        
                <telerik:RadPanelItem Text="Filter by category" Value="Categories" CssClass="filterTitle" EnableViewState="false">
                    <Items>
                        <telerik:RadPanelItem Text="Loading..."></telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelItem>
                <telerik:RadPanelItem Text="Filter by region" Value="Locations" CssClass="filterTitle" EnableViewState="false">
                    <Items>
                        <telerik:RadPanelItem Text="Loading..."></telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelItem>            
            </Items>
        </telerik:RadPanelBar>

The problem that I have is that whatever properties I set in the second RadPanel overrides all the properties for the first RadPanel including setting the skin, is this a known bug, if so is there a way around it? I am using the 2009_1_527 build.

[Veselin Vasilev]

Hi Matt,

The default value of the Skin property is Default. So even if you disable the embedded skins the control will render the CSS classes for the Default skin. Thus the problem you have.

To resolve it please set Skin="" for the first panelbar.

Greetings,
Veselin Vasilev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Matt]

The problem has been half fixed, now the classes are still rendered (without the _Default skin name),  by because the second RadPanel is rendering with a skin the CSS is still being created for the default RadPanel behaviour

i.e.

.RadPanelBar .rpRootGroup {

border-style:solid;

border-width:1px;

}

Which is causing a border to appear around the menu, I can solve this by overriding the CSS, but I thought there would be a way to get around this.

[Veselin Vasilev]

Hello Matt,

I am afraid you need to override the CSS classes that are in the base stylesheet.
This is the only workaround for now.


Best wishes,
Veselin Vasilev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.