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

[Solved] Two radMenu with different custom styles

2 Answers 123 Views

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

Eduardo asked on 11 Jun 2009, 02:59 PM

Hi Telerik Geniuses! :)

I have two RadMenus on a page and each one uses a different custom css and it shows completely messed up. When I change one of them to use an embedded skin it works nice.

I believe I did all correct with creating the folders and copying all the correct files. I added the Skins folder, under this a CustomBlack and a CustomOutlook folders, on the Skins folder I copied the Menu.css file, on the CustomBlack the Menu.Black.css (renamed to Menu.CustomBlack.css and changed all references inside from RadMenu_Black to RadMenu_CustomBlack), on the CustomOutlook folder I did the same but using the Menu.Outlook.css.

The test page source is as follows, if I change any of the menu's back to use the embedded skins, it works fine.

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="BreadCrumbTest.aspx.cs" Inherits="TelerikTestN.BreadCrumbTest" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml" > 
        
            <head runat="server"> 
        
                <title></title> 
        
                <link href="Skins/CustomBlack/Menu.CustomBlack.css" rel="stylesheet" type="text/css" /> 
        
                <link href="Skins/CustomOutlook/Menu.CustomOutlook.css" rel="stylesheet" type="text/css" /> 
        
                <telerik:radcodeblock ID="RadCodeBlock1" runat="server"> 
        
                    <script type="text/javascript"> 
        
                        function onClicking(sender, eventArgs) { 
        
                            var BreadCrumbs = $find("<%= RadMenu1.ClientID %>"); 
        
                            var item = eventArgs.get_item(); 
        
                            var name = item.get_text(); 
        
                            BreadCrumbs.close(); 
        
                            BreadCrumbs.get_items().clear(); 
        
                            var childItem = new Telerik.Web.UI.RadMenuItem(); 
        
                            childItem.set_text(name); 
        
                            for (var i = 0; i < 3; i++) { 
        
                                var menuItem = new Telerik.Web.UI.RadMenuItem(); 
        
                                menuItem.set_text("Test " + i); 
        
                                childItem.get_items().add(menuItem); 
        
                            } 
        
                            BreadCrumbs.get_items().add(childItem); 
        
                        } 
        
                    </script> 
        
                </telerik:radcodeblock> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> 
        
                </telerik:RadScriptManager> 
        
                <div> 
        
                    <telerik:RadMenu ID="RadMenu1" runat="server" Skin="CustomBlack" 
        
                            EnableEmbeddedBaseStylesheet="false" EnableEmbeddedSkins="false" 
        
                            OnClientItemClicking="onClicking"> 
        
                        <Items> 
        
                            <telerik:RadMenuItem runat="server" Text="Root"> 
        
                                <Items> 
        
                                    <telerik:RadMenuItem runat="server" Text="Test 1"> 
        
                                    </telerik:RadMenuItem> 
        
                                    <telerik:RadMenuItem runat="server" Text="Test 2"> 
        
                                    </telerik:RadMenuItem> 
        
                                    <telerik:RadMenuItem runat="server" Text="Test 3"> 
        
                                    </telerik:RadMenuItem> 
        
                                </Items> 
        
                            </telerik:RadMenuItem> 
        
                        </Items> 
        
                    </telerik:RadMenu> 
        
                    <telerik:RadMenu ID="RadMenu2" runat="server" Skin="CustomOutlook" 
        
                                EnableEmbeddedBaseStylesheet="false" EnableEmbeddedSkins="false"> 
        
                        <Items> 
        
                            <telerik:RadMenuItem runat="server" Text="Root"> 
        
                                <Items> 
        
                                    <telerik:RadMenuItem runat="server" Text="Test 1"> 
        
                                    </telerik:RadMenuItem> 
        
                                    <telerik:RadMenuItem runat="server" Text="Test 2"> 
        
                                    </telerik:RadMenuItem> 
        
                                    <telerik:RadMenuItem runat="server" Text="Test 3"> 
        
                                    </telerik:RadMenuItem> 
        
                                </Items> 
        
                            </telerik:RadMenuItem> 
        
                        </Items> 
        
                    </telerik:RadMenu> 
        
                </div> 
        
                </form> 
        
            </body> 
        
            </html>

Am I missing something?

Thanks,
Eduardo

2 Answers, 1 is accepted

Accepted