Style & appearance confilct with RadMenu and RadContextMenu one same Page

2 posts, 0 answers
  1. Harald
    Harald avatar
    3 posts
    Member since:
    Jan 2018

    Posted 09 Nov 2018 Link to this post

    Hello,

    I have a RadMenu and RadContextMenu on the same page. This causes a conflict in the style & appearance of the RadMenu. 
    Please have a look at the two pages and the rendering of the RadMenu (see attached images).

    1. Page with RadMenu alone, see Img RadMenu1.png.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestCntxMenu2.aspx.cs" Inherits="CMSNewTests.TestCntxMenu2" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
     
    <!DOCTYPE html>
     
    <head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
                    <telerik:RadMenu RenderMode="Lightweight" ID="RadMenu1" runat="server" ShowToggleHandle="true" Skin="Bootstrap"  IconColumnWidth="20">
                        <Items>
                            <telerik:RadMenuItem Text="Products">
                                <Items>
                                    <telerik:RadMenuItem Text="Chairs" ></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Sofas" ></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Tables" ></telerik:RadMenuItem>
                                </Items>
                            </telerik:RadMenuItem>               
                        </Items>
                    </telerik:RadMenu>
            </div>
        </form>
    </body>
    </html>

    2. Page with RadMenu and RadContextMenu, see Img RadMenu2.png.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestCntxMenu2.aspx.cs" Inherits="CMSNewTests.TestCntxMenu2" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
     
    <!DOCTYPE html>
     
    <head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
                    <telerik:RadMenu RenderMode="Lightweight" ID="RadMenu1" runat="server" ShowToggleHandle="true" Skin="Bootstrap"  IconColumnWidth="20">
                        <Items>
                            <telerik:RadMenuItem Text="Products">
                                <Items>
                                    <telerik:RadMenuItem Text="Chairs" ></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Sofas" ></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Tables" ></telerik:RadMenuItem>
                                </Items>
                            </telerik:RadMenuItem>               
                        </Items>
                    </telerik:RadMenu>
                    <telerik:RadContextMenu runat="server" ID="RadContextMenu1" >
                        <Items>
                            <telerik:RadMenuItem Text="Add research field" Value="Add" />
                        </Items>
                    </telerik:RadContextMenu>
            </div>
        </form>
    </body>
    </html>

    How can I achieve the style & appearance of the first image when using both controls on the same page? Why is the style & appearance changing at all when inserting the context menu?

    Thanks for your answer and help,
    Harald

     

  2. Harald
    Harald avatar
    3 posts
    Member since:
    Jan 2018

    Posted 09 Nov 2018 in reply to Harald Link to this post

    Answer: When I set the RenderMode="Lightweight" in the RadContextMenu than everything is fine....
Back to Top