Radgrid and Radmenu conflict with rendermode lightweight

[n/a]

I have a vertical radmenu across all pages in an application

When I add a Radgrid rendered in lightweight, the radmenu gets surrounded by a border.

I have tried to add the rendermode Lightweight to the radmenu, but the border is still there and instead of displaying all the icons in the menu it only displays one.

Could you please let me know what is the solution to keep the rendermode to lightweight for the radgrid, as this is the look we are after while removing the border around the menu.

Thank you

Anne

 

 

 

[Peter Milchev]

Hello Anne,

The mixed render mode issue appears when controls of the same type are in two different render modes on the page. You can use the script in the KB below to see which controls are in Lightweight and which are in Classic render mode.

• https://www.telerik.com/support/kb/aspnet-ajax/details/determine-the-render-mode-of-all-telerik-controls-and-catch-mixed-render-mode-issues

In your scenario, this might be the conflict between the RadMenu and the RadMenus/ContextMenus inside the RadGrid. 

If you need to have different render modes for the menu and the grid, then you should change the render mode of the internal menu controls of the grid, for example in Grid's PreRender event:

protected void RadGrid1_PreRender(object sender, EventArgs e)
{
    var grid = sender as RadGrid;
    grid.FilterMenu.RenderMode = RenderMode.Lightweight;
    grid.HeaderContextMenu.RenderMode = RenderMode.Lightweight;
}

Also, for some reason the attached images are empty.

Regards,
Peter Milchev
Progress Telerik

[n/a]

Hi Peter,

Thank you for your response.

I don't really want to change the internal menu of the grid.

 

I have a grid with a lightweight render

and in the same page I have a vertical radmenu, displaying a set of icon some with submenus.

There is no link between the grid and the radmenu, except that when you select an option from the radmenu you can display or hide  a grid.

Attached are some screenshots:

 

[Peter Milchev]

Hello Anne,

Please run the script from the KB article and see if there are menus or context menus with different render modes. 

• https://docs.telerik.com/devtools/aspnet-ajax/knowledge-base/common-determine-mixed-render-mode

Also, you can inspect the menu and see which styles are applying the border by following the steps below:

• Inspect the Generated HTML of a Control
• See the Applied Styles

Most probably it would disappear if you set the following style:

html .RadMenu .rmGroup:before,
html .RadMenu .rmMultiColumn:before,
html .RadMenu .rmScrollWrap > .rmHorizontal:before,
html .RadMenu .rmScrollWrap > .rmVertical:before {
    border-style: hidden;
}

Regards,
Peter Milchev
Progress Telerik

[n/a]

Hi Peter,

I ran the script from the KB Article, the radmenu is in classic mode and the radgrid in lightweight.

I have attached the screenshot of the results below.

I have been using the inspector to figure out where the border comes from, but haven't manage to locate them, I've read the link you sent in case I could learn something but I have been using these tools already.

I have added the style you provided either directly in the control where the radmenu is located or in the css file where the skin is saved. I am using a modified version of silk, but that did not solve the issue.

 

Below is the code in the Radmenu control:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="sks_RightMMenu.ascx.cs" Inherits="Sapphire.Control.Shared.sks_RightMMenu" %>

<link rel="stylesheet" href="../../App_Style/CSS/Menu.Silk.css" />

    <style type="text/css">
        .context-menu .rmText {
            font-size: 0.9em;
        }

        .context-menu .rmDisabled {
            color: #aaa !important;
            background-color: transparent !important;
        }

        .context-menu .rmFirst:hover,
        .context-menu .rmLast:hover {
            cursor: default !important;
            background-color: #FF9900 !important;
        }

        .context-menu .rmItem:hover {
            background-color: none !important;
        }

        .context-menu .rmSeparator:hover {
            background-color: transparent !important;
        }

html .RadMenu_Sapphire .rmGroup:before,
html .RadMenu_Sapphire .rmMultiColumn:before,
html .RadMenu_Sapphire .rmScrollWrap > .rmHorizontal:before,
html .RadMenu_Sapphire .rmScrollWrap > .rmVertical:before {
    border-style: hidden;
}

    </style>

<asp:Panel ID="pnlMenu" runat="server" CssClass="MiniMenu_Position" Visible="true">

    <asp:Label runat="server" ID="lblConfirm" Visible="true"/>
    <div class="rightPopOutMenu_Display">
        <asp:Panel ID="pnlGoToModule" runat="server">
            <telerik:RadMenu ID="mnRightMenu" runat="server" Skin="Sapphire" EnableEmbeddedSkins="false" ExpandDelay="1000" ClickToOpen="false"
            EnableScreenBoundaryDetection="false"
            OnItemClick="mnQuestion_MenuItemClick" OnClientItemClicking ="onClick"  OnItemDataBound="mnRightMenu_ItemDatabound">
                <DefaultGroupSettings ExpandDirection="Left" OffsetY="-10"  />
            </telerik:RadMenu>
        </asp:Panel>
    </div>
</asp:Panel>

 

This is the css for the menu skin:

.RadMenu_Sapphire .rmDisabled .rmIcon, .RadMenu_Sapphire .rmGroup .rmLink.rmDisabled .rmText:before, .RadMenu_Sapphire .rmGroup .rmLink.rmDisabled:hover .rmText:before {
    filter: alpha(opacity=60);
    opacity: 0.6;
}

.RadMenu_Sapphire {
    color: #004273;
    font-family: Lato;
}

.RadMenu_Sapphire .rmHorizontal > .rmSeparator .rmText,
.RadMenu_Sapphire .rmHorizontal > .rmRootScrollGroup > .rmSeparator .rmText {
    margin: 0;
}

.RadMenu_Sapphire .rmVertical > .rmSeparator .rmText,
.RadMenu_Sapphire .rmVertical > .rmRootScrollGroup > .rmSeparator .rmText {
}

.RadMenu_Sapphire .rmGroup.rmVertical > .rmSeparator .rmText,
.RadMenu_Sapphire .rmScrollWrap > .rmVertical > .rmSeparator .rmText {
}

.RadMenu_Sapphire .rmIcon {
    display: block;
}

.RadMenu_Sapphire .rmToggle {
}

.RadMenu_Sapphire .rmRootLink .rmToggle {
}

html .RadMenu_Sapphire .rmGroup:before,
html .RadMenu_Sapphire .rmMultiColumn:before,
html .RadMenu_Sapphire .rmScrollWrap > .rmHorizontal:before,
html .RadMenu_Sapphire .rmScrollWrap > .rmVertical:before {
    border-style: hidden;
}

.RadMenu_Sapphire .rmLeftArrow {
    background-position: -20px -1106px;
}

    .RadMenu_Sapphire .rmLeftArrow:hover {
        background-position: -70px -1106px;
    }

.RadMenu_Sapphire .rmRightArrow {
    background-position: -20px -1156px;
}

.RadMenu_Sapphire .rmRightArrow:hover {
    background-position: -70px -1156px;
}

.RadMenu_Sapphire .rmTopArrow,
.RadMenu_Sapphire .rmBottomArrow {
    background-image: url('Menu/rmArrows.png');
    background-repeat: no-repeat;
}

.RadMenu_Sapphire .rmTopArrow {
    background-position: center -20px;
}

.RadMenu_Sapphire .rmTopArrow:hover {
    background-position: center -220px;
}

.RadMenu_Sapphire .rmBottomArrow {
    background-position: center -70px;
}

.RadMenu_Sapphire .rmBottomArrow:hover {
    background-position: center -270px;
}

.RadMenu_Sapphire .rmTopFix,
.RadMenu_Sapphire .rmTopLeft,
.RadMenu_Sapphire .rmTopRight,
.RadMenu_Sapphire .rmBottomFix,
.RadMenu_Sapphire .rmBottomLeft,
.RadMenu_Sapphire .rmBottomRight {
    display: none;
}

.RadMenu_Sapphire_Context.rmRoundedCorners ul.rmGroup {
    padding: 0px;
}

.RadMenu_Sapphire_Context.RadMenu_Sapphire .rmGroup {
    padding: 0;
}

.RadMenu_Sapphire .rmRootGroup.rmVertical {
    background: transparent;
    border-bottom: 0;
}

.RadMenu_Sapphire .rmRootLink .rmExpandTop {
    background-position: right -61px;
}

.RadMenu_Sapphire .rmRootLink .rmExpandRight {
    background-position: right -161px;
}

.RadMenu_Sapphire .rmRootLink .rmExpandLeft {
    background-position: left -111px;
}

.RadMenu_Sapphire .rmRootLink:hover .rmExpandTop, .RadMenu_Sapphire .rmRootLink.rmFocused .rmExpandTop, .RadMenu_Sapphire .rmRootLink.rmSelected .rmExpandTop, .RadMenu_Sapphire .rmRootLink.rmExpanded .rmExpandTop {
    background-position: right -461px;
}

.RadMenu_Sapphire .rmRootLink:hover .rmExpandRight, .RadMenu_Sapphire .rmRootLink.rmFocused .rmExpandRight, .RadMenu_Sapphire .rmRootLink.rmSelected .rmExpandRight, .RadMenu_Sapphire .rmRootLink.rmExpanded .rmExpandRight {
    background-position: right -561px;
}

.RadMenu_Sapphire .rmRootLink:hover .rmExpandLeft, .RadMenu_Sapphire .rmRootLink.rmFocused .rmExpandLeft, .RadMenu_Sapphire .rmRootLink.rmSelected .rmExpandLeft, .RadMenu_Sapphire .rmRootLink.rmExpanded .rmExpandLeft {
    background-position: left -511px;
}

.RadMenu_Sapphire .rmToggleHandles .rmRootLink .rmExpandTop,
.RadMenu_Sapphire .rmToggleHandles .rmRootLink .rmExpandDown,
.RadMenu_Sapphire .rmToggleHandles .rmRootLink .rmExpandRight,
.RadMenu_Sapphire .rmToggleHandles .rmRootLink .rmExpandLeft {
    background-image: none;
}

.RadMenu_Sapphire .rmRootLink .rmText {
    padding: 0;
    display: block;
}


.RadMenu_Sapphire .rmRootLink:hover .rmText {
    padding-top: 0;
}

.RadMenu_Sapphire .rmRootLink:hover .rmLeftImage {
    height: 30px !Important;
    width: 30px !Important;
}

.RadMenu_Sapphire .rmRootLink.rmFocused .rmText, .RadMenu_Sapphire .rmRootLink.rmSelected .rmText, .RadMenu_Sapphire .rmRootLink.rmExpanded .rmText {
    padding-top: 0;
}

.RadMenu_Sapphire .rmRootLink.rmFocused .rmLeftImage, .RadMenu_Sapphire .rmRootLink.rmSelected .rmLeftImage, .RadMenu_Sapphire .rmRootLink.rmExpanded .rmLeftImage {
    height: 30px !Important;
    width: 30px !Important;
}

.RadMenu_Sapphire .rmRootLink.rmDisabled {
    border: 0;
    color: #b1b1b1;
    background: none;
    box-shadow: none;
}


.RadMenu_Sapphire .rmVertical .rmRootLink:hover .rmText.rmExpandRight:before {
    background-position: -120px -1170px;
}

.RadMenu_Sapphire .rmVertical .rmRootLink:hover .rmText.rmExpandLeft:before {
    background-position: -120px -1120px;
}

.RadMenu_Sapphire .rmVertical .rmRootLink.rmFocused .rmText.rmExpandRight:before, .RadMenu_Sapphire .rmVertical .rmRootLink.rmSelected .rmText.rmExpandRight:before, .RadMenu_Sapphire .rmVertical .rmRootLink.rmExpanded .rmText.rmExpandRight:before {
    background-position: -120px -1170px;
}

.RadMenu_Sapphire .rmVertical .rmRootLink.rmFocused .rmText.rmExpandLeft:before, .RadMenu_Sapphire .rmVertical .rmRootLink.rmSelected .rmText.rmExpandLeft:before, .RadMenu_Sapphire .rmVertical .rmRootLink.rmExpanded .rmText.rmExpandLeft:before {
    background-position: -120px -1120px;
}

.RadMenu_Sapphire .rmVertical .rmRootLink.rmDisabled {
    border: 0;
    color: #b1b1b1;
    background: none;
    box-shadow: none;
}


.RadMenu_Sapphire .rmToggle {
    margin: 0;
}


.RadMenu_Sapphire .rmGroup,
.RadMenu_Sapphire .rmPopup {
    background: #ffffff; /*border of the sub menu*/
    box-shadow: 0px 3px 3px rgba(122, 122, 122, 0.7);
    border: 1px solid #e3e2e2;
}

@media \0screen\,screen\9 {
    .RadMenu_Sapphire .rmGroup,
    .RadMenu_Sapphire .rmPopup {
    }
}

@media \0screen\,screen\9 {
    .RadMenu_Sapphire .rmRoundedCorners .rmItem ul.rmGroup,
    .RadMenu_Sapphire .rmRoundedCorners .rmSlide .rmScrollWrap,
    .RadMenu_Sapphire .rmRoundedCorners .rmContentTemplate {
    }
}

.RadMenu_Sapphire .rmRoundedCorners ul.rmGroup {
    margin-top: 0;
}

.RadMenu_Sapphire .rmRoundedCorners .rmItem .rmGroup,
.RadMenu_Sapphire .rmRoundedCorners .rmScrollWrapContainer {
    padding: 0px;
}

.RadMenu_Sapphire .rmScrollWrapContainer .rmGroup {
    box-shadow: none;
}

.RadMenu_Sapphire .rmScrollWrapContainer {
    background: #fff;
    box-shadow: 0 3px 3px rgba(122, 122, 122, 0.7);
}

.RadMenu_Sapphire .rmGroup .rmLink {
    text-decoration: none !important; /*remove the underline*/
}

.RadMenu_Sapphire .rmGroup .rmLink .rmText {
    position: relative;
}

.RadMenu_Sapphire .rmGroup .rmLink .rmText:before {
    content: "";
    display: none;
    position: absolute;
    top: 50%;
}

.RadMenu_Sapphire .rmGroup .rmLink .rmExpandTop {
    background-position: right -10px;
}

.RadMenu_Sapphire .rmGroup .rmLink .rmExpandDown {
}

.RadMenu_Sapphire .rmGroup .rmLink .rmExpandLeft {
    background-position: right -110px;
}

.RadMenu_Sapphire .rmGroup .rmLink .rmExpandRight {
    background-position: right -160px;
}

.RadMenu_Sapphire .rmGroup .rmLink:hover .rmExpandTop, .RadMenu_Sapphire .rmGroup .rmLink.rmFocused .rmExpandTop, .RadMenu_Sapphire .rmGroup .rmLink.rmSelected .rmExpandTop, .RadMenu_Sapphire .rmGroup .rmLink.rmExpanded .rmExpandTop {
    background-position: right -410px;
}

.RadMenu_Sapphire .rmGroup .rmLink:hover .rmExpandDown, .RadMenu_Sapphire .rmGroup .rmLink.rmFocused .rmExpandDown, .RadMenu_Sapphire .rmGroup .rmLink.rmSelected .rmExpandDown, .RadMenu_Sapphire .rmGroup .rmLink.rmExpanded .rmExpandDown {
}

.RadMenu_Sapphire .rmGroup .rmLink:hover .rmExpandLeft, .RadMenu_Sapphire .rmGroup .rmLink.rmFocused .rmExpandLeft, .RadMenu_Sapphire .rmGroup .rmLink.rmSelected .rmExpandLeft, .RadMenu_Sapphire .rmGroup .rmLink.rmExpanded .rmExpandLeft {
    background-position: right -510px;
}

.RadMenu_Sapphire .rmGroup .rmLink:hover .rmExpandRight, .RadMenu_Sapphire .rmGroup .rmLink.rmFocused .rmExpandRight, .RadMenu_Sapphire .rmGroup .rmLink.rmSelected .rmExpandRight, .RadMenu_Sapphire .rmGroup .rmLink.rmExpanded .rmExpandRight {
    background-position: right -560px;
}

.RadMenu_Sapphire .rmGroup .rmLink.rmDisabled .rmExpandTop {
    background-position: right -10px;
}

.RadMenu_Sapphire .rmGroup .rmLink.rmDisabled .rmExpandDown {
}

.RadMenu_Sapphire .rmGroup .rmLink.rmDisabled .rmExpandLeft {
    background-position: right -110px;
}

.RadMenu_Sapphire .rmGroup .rmLink.rmDisabled .rmExpandRight {
    background-position: right -160px;
}

.RadMenu_Sapphire .rmGroup .rmLink .rmExpandTop:before,
.RadMenu_Sapphire .rmGroup .rmLink .rmExpandDown:before,
.RadMenu_Sapphire .rmGroup .rmLink .rmExpandRight:before,
.RadMenu_Sapphire .rmGroup .rmLink .rmExpandLeft:before {
    display: block;
}

.RadMenu_Sapphire .rmGroup .rmLink .rmExpandTop:before {
    background-position: -17px -1017px;
}

.RadMenu_Sapphire .rmGroup .rmLink .rmExpandDown:before {
}

.RadMenu_Sapphire .rmGroup .rmLink .rmExpandRight:before {
    background-position: -17px -1167px;
}

.RadMenu_Sapphire .rmGroup .rmLink .rmExpandLeft:before {
    background-position: -17px -1117px;
}

.RadMenu_Sapphire .rmGroup .rmLink.rmExpanded .rmExpandTop:before, .RadMenu_Sapphire .rmGroup .rmLink:hover .rmExpandTop:before, .RadMenu_Sapphire .rmGroup .rmLink.rmFocused .rmExpandTop:before, .RadMenu_Sapphire .rmGroup .rmLink.rmSelected .rmExpandTop:before {
    background-position: -117px -1017px;
}

.RadMenu_Sapphire .rmGroup .rmLink.rmExpanded .rmExpandDown:before, .RadMenu_Sapphire .rmGroup .rmLink:hover .rmExpandDown:before, .RadMenu_Sapphire .rmGroup .rmLink.rmFocused .rmExpandDown:before, .RadMenu_Sapphire .rmGroup .rmLink.rmSelected .rmExpandDown:before {
}

.RadMenu_Sapphire .rmGroup .rmLink.rmExpanded .rmExpandRight:before, .RadMenu_Sapphire .rmGroup .rmLink:hover .rmExpandRight:before, .RadMenu_Sapphire .rmGroup .rmLink.rmFocused .rmExpandRight:before, .RadMenu_Sapphire .rmGroup .rmLink.rmSelected .rmExpandRight:before {
    background-position: -117px -1167px;
}

.RadMenu_Sapphire .rmGroup .rmLink.rmExpanded .rmExpandLeft:before, .RadMenu_Sapphire .rmGroup .rmLink:hover .rmExpandLeft:before, .RadMenu_Sapphire .rmGroup .rmLink.rmFocused .rmExpandLeft:before, .RadMenu_Sapphire .rmGroup .rmLink.rmSelected .rmExpandLeft:before {
    background-position: -117px -1117px;
}

.RadMenu_Sapphire .rmGroup .rmLink.rmDisabled, .RadMenu_Sapphire .rmGroup .rmLink.rmDisabled:hover {
    background-image: none !important;
    background: none;
}

.RadMenu_Sapphire .rmGroup .rmLink.rmDisabled .rmExpandTop:before, .RadMenu_Sapphire .rmGroup .rmLink.rmDisabled:hover .rmExpandTop:before {
    background-position: -17px -1017px;
}

.RadMenu_Sapphire .rmGroup .rmLink.rmDisabled .rmExpandDown:before, .RadMenu_Sapphire .rmGroup .rmLink.rmDisabled:hover .rmExpandDown:before {
}

.RadMenu_Sapphire .rmGroup .rmLink.rmDisabled .rmExpandRight:before, .RadMenu_Sapphire .rmGroup .rmLink.rmDisabled:hover .rmExpandRight:before {
    background-position: -17px -1167px;
}

.RadMenu_Sapphire .rmGroup .rmLink.rmDisabled .rmExpandLeft:before, .RadMenu_Sapphire .rmGroup .rmLink.rmDisabled:hover .rmExpandLeft:before {
    background-position: -17px -1117px;
}

.RadMenu_Sapphire .rmSlide .rmHorizontal .rmItem {
    margin-bottom: 0;
}

.RadMenu_Sapphire .rmVertical .rmGroup,
.RadMenu_Sapphire .rmSlide .rmGroup .rmGroup,
.RadMenu_Sapphire .rmSlide .rmSlide .rmScrollWrapContainer {
}

.RadMenu_Sapphire .rmVertical .rmScrollWrapContainer .rmVertical {
    border: 0;
}

.RadMenu_Sapphire .rmMultiColumn {
    background: #ffffff;
    box-shadow: 0 3px 3px rgba(122, 122, 122, 0.7);
}

.RadMenu_Sapphire .rmMultiColumn .rmGroup {
    box-shadow: none;
}

.RadMenu_Sapphire .rmGroup .rmLeftArrow {
    background-position: -20px -1107px;
}

.RadMenu_Sapphire .rmGroup .rmLeftArrow:hover {
    background-position: -70px -1107px;
}

.RadMenu_Sapphire .rmGroup .rmRightArrow {
    background-position: -20px -1157px;
}

.RadMenu_Sapphire .rmGroup .rmRightArrow:hover {
    background-position: -70px -1157px;
}


.RadMenu_Sapphire .rmHorizontal .rmRootLink:hover .rmToggle,
.RadMenu_Sapphire .rmHorizontal .rmRootLink.rmFocused .rmToggle,
.RadMenu_Sapphire .rmHorizontal .rmRootLink.rmSelected .rmToggle,
.RadMenu_Sapphire .rmHorizontal .rmRootLink.rmExpanded .rmToggle {
    margin-top: 0;
}


.RadMenu_Sapphire .rmVertical .rmRootLink:hover .rmIcon, .RadMenu_Sapphire .rmVertical .rmRootLink.rmFocused .rmIcon {
}

@media screen\9 {
    .RadMenu_Sapphire .rmVertical .rmRootLink:hover .rmIcon, .RadMenu_Sapphire .rmVertical .rmRootLink.rmFocused .rmIcon {
    }
}

.RadMenu_Sapphire .rmVertical .rmRootLink.rmDisabled .rmIcon {
    background-position: 50% -167px;
}

@media screen\9 {
    .RadMenu_Sapphire .rmVertical .rmRootLink.rmDisabled .rmIcon {
        background-position: -2px -167px;
    }
}


.RadMenu_Sapphire_rtl .rmVertical .rmRootLink .rmIcon {
    background-position: 50% -117px;
}

@media screen\9 {
    .RadMenu_Sapphire_rtl .rmVertical .rmRootLink .rmIcon {
        background-position: -2px -117px;
    }
}

.RadMenu_Sapphire_rtl .rmVertical .rmRootLink:hover .rmIcon, .RadMenu_Sapphire_rtl .rmVertical .rmRootLink.rmFocused .rmIcon {
    background-position: 50% -517px;
}

@media screen\9 {
    .RadMenu_Sapphire_rtl .rmVertical .rmRootLink:hover .rmIcon, .RadMenu_Sapphire_rtl .rmVertical .rmRootLink.rmFocused .rmIcon {
        background-position: -2px -517px;
    }
}

.RadMenu_Sapphire_rtl .rmRootGroup .rmSeparator .rmText {
    border-color: #fefefe #e3e2e2 #e3e2e2 #fefefe;
}

.RadMenu_Sapphire_rtl .rmRootGroup .rmLast {
    border-left: 0;
}

.RadMenu_Sapphire_rtl .rmGroup .rmLink .rmExpandTop {
    background-position: left -8px;
}

.RadMenu_Sapphire_rtl .rmGroup .rmLink .rmExpandDown {
}

.RadMenu_Sapphire_rtl .rmGroup .rmLink .rmExpandLeft {
    background-position: left -108px;
}

.RadMenu_Sapphire_rtl .rmGroup .rmLink .rmExpandRight {
    background-position: left -158px;
}

.RadMenu_Sapphire_rtl .rmGroup .rmLink:hover .rmExpandTop, .RadMenu_Sapphire_rtl .rmGroup .rmLink.rmFocused .rmExpandTop, .RadMenu_Sapphire_rtl .rmGroup .rmLink.rmSelected .rmExpandTop, .RadMenu_Sapphire_rtl .rmGroup .rmLink.rmExpanded .rmExpandTop {
    background-position: left -408px;
}

.RadMenu_Sapphire_rtl .rmGroup .rmLink:hover .rmExpandDown, .RadMenu_Sapphire_rtl .rmGroup .rmLink.rmFocused .rmExpandDown, .RadMenu_Sapphire_rtl .rmGroup .rmLink.rmSelected .rmExpandDown, .RadMenu_Sapphire_rtl .rmGroup .rmLink.rmExpanded .rmExpandDown {
}

.RadMenu_Sapphire_rtl .rmGroup .rmLink:hover .rmExpandLeft, .RadMenu_Sapphire_rtl .rmGroup .rmLink.rmFocused .rmExpandLeft, .RadMenu_Sapphire_rtl .rmGroup .rmLink.rmSelected .rmExpandLeft, .RadMenu_Sapphire_rtl .rmGroup .rmLink.rmExpanded .rmExpandLeft {
    background-position: left -508px;
}

.RadMenu_Sapphire_rtl .rmGroup .rmLink:hover .rmExpandRight, .RadMenu_Sapphire_rtl .rmGroup .rmLink.rmFocused .rmExpandRight, .RadMenu_Sapphire_rtl .rmGroup .rmLink.rmSelected .rmExpandRight, .RadMenu_Sapphire_rtl .rmGroup .rmLink.rmExpanded .rmExpandRight {
    background-position: left -558px;
}

 

 

And it is the form where the menu is located as well as the radgrids, the radgrids are in controls:

<%@ Page Language="C#" AutoEventWireup="true" EnableEventValidation="false" CodeBehind="Marking_Result.aspx.cs" Inherits="Sapphire.Marking_Result" MasterPageFile="~/Master/MasterPage.master" %>

<%@ Register Src="~/Control/Menu/sks_RightMMenu.ascx" TagName="RightMenu" TagPrefix="sks" %>
<%@ Register Src="~/Control/Assessment/Marking_Result/sks_Summary.ascx" TagName="Summary" TagPrefix="sks" %>
<%@ Register Src="~/Control/Assessment/Marking_Result/sks_QuestionBreakdown.ascx" TagName="Breakdown" TagPrefix="sks" %>
<%@ Register Src="~/Control/Assessment/Marking_Result/sks_PilotMarking.ascx" TagName="Pilot" TagPrefix="sks" %>
<%@ Register Src="~/Control/Assessment/Marking_Result/sks_GraphDistribution.ascx" TagName="Graph" TagPrefix="sks" %>

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

    <telerik:RadPersistenceManager ID="RadPersistenceManager1" runat="server">
        <PersistenceSettings>
            <telerik:PersistenceSetting ControlID="ctl_Summary.GVExport" />
            <telerik:PersistenceSetting ControlID="ctl_Breakdown.GVExport" />
        </PersistenceSettings>
    </telerik:RadPersistenceManager>

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ctlRightMenu">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ctl_Pilot" LoadingPanelID="RadAjaxLoadingPanel1">
                    </telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    </telerik:RadAjaxLoadingPanel>

    <asp:UpdatePanel ID="updRightMenu" runat="Server">
        <ContentTemplate>
            <sks:RightMenu ID="ctlRightMenu" runat="server" OnMenuSelected="ctlRightMenu_MenuSelected" />
        </ContentTemplate>
    </asp:UpdatePanel>

    <sks:MainMenu ID="ctlMainMenu" runat="server" OnSelectMenuItem="ctlMainMenu_Select" />

    <asp:Panel ID="pnlParameter" runat="server">
        <asp:Label ID="lblFormTitle" runat="server" Visible="False" />
        <asp:HiddenField ID="lblSelection" runat="Server" />
        <asp:HiddenField ID="hfOrgID" runat="Server" />
        <asp:HiddenField ID="hfAssessID" runat="Server" />
        <asp:HiddenField ID="hfTotalMarker" runat="Server" />
        <asp:HiddenField ID="hfTotalQuestion" runat="Server" />
        <asp:HiddenField ID="lblUserName" runat="Server" />
        <asp:HiddenField ID="hfIsArchived" runat="Server" />
        <asp:HiddenField ID="hfIsPilot" runat="Server" />
        <asp:HiddenField ID="hfIsMultipleMarking" runat="Server" />
        <asp:HiddenField ID="hfIsEditMode" runat="Server" />
    </asp:Panel>

    <div class="pagecontentwidth">

        <div style="width: 75%; padding: 20px 50px 0 50px">
            <sks:Summary ID="ctl_Summary" runat="Server" Visible="False"/>
        </div>

        <div style="width: 98%; padding: 0 50px 0 50px; overflow-x: auto">
            <sks:Breakdown ID="ctl_Breakdown" runat="Server" Visible="False" />
        </div>

        <div style="width: 98%; padding: 0 50px 0 50px">
            <sks:Pilot ID="ctl_Pilot" runat="Server" Visible="False" OnUpdatePrimaryMarker="ctl_Pilot_RefreshPage" />
        </div>

        <div style="width: 98%; padding: 0 50px 0 50px">
            <sks:Graph ID="ctl_GraphDistribution" runat="Server" Visible="False" />
        </div>

        <div style="height: 30px"></div>
    </div>
</asp:Content>

[Peter Milchev]

Hello Anne,

My guess was correct and indeed you have the Menu in Classic render mode while the ContextMenus in Lightweight render mode, inherited from the Grid. As the RadcontextMenu actually inherits the RadMenu, having Menu and a ContextMenu with different render modes leads to such issues.

With that said, one option is to set the Grids context menus to Classic render mode as the snippet I have shared for the Grid's PreRender event.

Another option is to change the render mode of the Menu to Lightweight but that would require changes to the custom styling.

Regards,
Peter Milchev
Progress Telerik

[n/a]

Hi Peter,

I cannot change the rendermode of the grid to classic as all the other grids in the application are rendered as lightweight.

I am OK to change the render mode to Lightweight for the menu, but when I change it, the borders are still there (see image attached),  it is not solving the issue, plus the height of the menu is not maintained, I suppose I can change that in the css.

If you look at the code on my previous post, I have added the control with the radmenu, added at the top is your code to hide the border, which did not remove the border.

I have also added the css used for the radmenu.

 

 

[Peter Milchev]

Hello Anne,

The borders seem to come from the base stylesheets of the Menu. 

To remove them, you can use the following styles:

.RadMenu.RadMenu_Sapphire .rmGroup,
.RadMenu.RadMenu_Sapphire .rmRootGroup,
.RadMenu.RadMenu_Sapphire .rmMultiColumn,
.RadMenu.RadMenu_Sapphire .rmPopup,
.RadMenu.RadMenu_Sapphire .rmRootGroup .rmItem,
.RadMenu.RadMenu_Sapphire_rtl .rmGroup,
.RadMenu.RadMenu_Sapphire_rtl .rmRootGroup,
.RadMenu.RadMenu_Sapphire_rtl .rmMultiColumn,
.RadMenu.RadMenu_Sapphire_rtl .rmPopup,
.RadMenu.RadMenu_Sapphire_rtl .rmRootGroup .rmItem {
    border: 0;
}

Regards,
Peter Milchev
Progress Telerik