Telerik Control Skinning Problem

[Kaushal]

Hi,

Please  find an attachment of "NavonaThemeSolutionExplorer.png".

I have created Two CSS for RadMenu inside "Navona" Theme named as "ViewMenu" & "FavoriteMenu". and also created one Navona Skin File named as "NavonaSKIN" .

Navona Skin Code Block:

<telerik:RadMenu SkinID="FavoriteMenu" runat="server" Skin="Navona" EnableEmbeddedSkins="false" EnableAutoScroll="true" EnableRootItemScroll="true">
</telerik:RadMenu>

<telerik:RadMenu SkinID="ViewMenu" runat="server" Skin="Navona" EnableEmbeddedSkins="false">
</telerik:RadMenu>

HTML Code Block :

  View Menu HTML Code:

   <div id="pnlview" runat="server" style="float: left; display: none; margin-left: 15px;
            margin-top: 5px;">
            <telerik:RadMenu ID="_542A5540_223E_491C_8EA9_507CF025693A" Style="z-index: 10000"
                SkinID="ViewMenu" Height="20" runat="server" OnItemClick="rmViews_ItemClick">
                <Items>
                    <telerik:RadMenuItem Text="Views" ImageUrl="../../ProjectResources/Images/View.png"
                     PostBack="False">
                        <Items>
                            <telerik:RadMenuItem Text="System View">
                                <Items>
                                    <telerik:RadMenuItem Text="Active View" />
                                    <telerik:RadMenuItem Text="InActive View" />
                                    <telerik:RadMenuItem Text="Deleted View" />
                                </Items>
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="Custom View">
                                <Items>
                                    <telerik:RadMenuItem Text="All Record View" />
                                    <telerik:RadMenuItem Text="My View View" />
                                    <telerik:RadMenuItem Text="My Cutom View" />
                                </Items>
                            </telerik:RadMenuItem>
                        </Items>
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenu>
        </div>

Favorite Menu HTML Code:

<div id="pnlFavorites" runat="server" style="width: 100%; display: none; clear: both;">
        <telerik:RadMenu ID="_5C90215B_8BB8_415C_BEA9_83F2ACB7A4FB" runat="server" SkinID="FavoriteMenu"
            Width="100%" Style="z-index: 2900" EnableRoundedCorners="true" EnableShadows="true"
            EnableScreenBoundaryDetection="true">
            <Items>
                <telerik:RadMenuItem Text="Active View">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="All">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="My Custom View 1">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="My Custom View 2">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="My Custom View 3">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="My Custom View 4">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="My Custom View 5">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="My Custom View 6">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="My Custom View 8">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="My Custom View 9">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="My Custom View 10">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="My Custom View 11">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="My Custom View 12">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="My Custom View 13">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="My Custom View 14">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="My Custom View 15">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="My Custom View 16">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="My Custom View 17">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="My Custom View 18">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="My Custom View 19">
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="My Custom View 20">
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadMenu>
    </div>

Web Config Code :

<pages theme="Navona" validateRequest="false">
   <controls>
     <add tagPrefix="telerik" namespace="Telerik.Web.UI" assembly="Telerik.Web.UI"/>
   </controls>
</pages>

Problem : it will mixed up both css for Rad Menu control. instead of that if i exclude any one css file then it will applied css for rad menu according to the skin id and present css file. Suppose i excude View Menu CSS file then Favorite Menu CSS is applied to the control whose skin id is "FavoriteMenu".



Please let me know solution of this problem. Kindly waiting for your suggestion......

Thanks
Kaushal.