Menu Over Window Zindexing

2 posts, 0 answers
  1. Dhyan
    Dhyan avatar
    27 posts
    Member since:
    Feb 2016

    Posted 15 Mar 2016 Link to this post

    I have issue with Zindexing (i believe). I am opening a window using RadWindowManager control, i need this window on top of menu layer. What property i need to setting menu  or window? Following is the code I am using to open window.
                ShowOnTopWhenMaximized ="true">
    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
        <script type="text/javascript">
            function OpenWin() {
                var manager = $find('subWindow');
      '/URL', null);
                return false;

    Code for generating menu is :

    <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
    <!DOCTYPE html>
    <head runat="server">
            .demo-container {
                border: 0;
            .demo-container .RadMenu {
                margin: 0 auto;
                font-size: 16px;
            html div.RadMenu_Glow .rmPopup {
     html div.RadMenu_Glow .rmPopup {
        background: none repeat scroll 0 0 rgba(104, 176, 237, .75);
             html .demo-container .RadMenu_Glow .rmRootGroup {
                position: relative;
                width: 100%;
            html div.RadMenu_Glow .rmItem .rmSlide .rmGroup {
            /*background-color : rgba(183, 209, 227, .75);*/
            color: black;
              font-size: 14px;
            width: 200px;
     html div.RadMenu_Glow .rmMultiColumn {
            border: 0;
            background: no-repeat scroll 0 0 rgb(133, 199, 254);
    html div.RadMenu_Glow .rmItem .rmSlide .rmFirstGroupColumn .rmLevel1  {
            background-position:left center;
            background-repeat: no-repeat;
            padding-left: 190px;
    html div.RadMenu_Glow .rmItem:nth-of-type(2) .rmSlide .rmFirstGroupColumn .rmLevel1 {
         background-image: url("one.jpg");
    html div.RadMenu_Glow .rmItem:nth-of-type(3) .rmSlide .rmFirstGroupColumn .rmLevel1 {
         background-image: url("two.jpg");
    html div.RadMenu_Glow .rmItem:nth-of-type(4) .rmSlide .rmFirstGroupColumn .rmLevel1 {
         background-image: url("three.png");
            html div.RadMenu_Glow .rmPopup {
                /*background: none repeat scroll 0 0 rgba(50, 82, 204, .75);*/
            .demo-container .RadMenu .rmPopup {
                width: 300px;
            html div.RadMenu_Glow .rmItem .rmSlide .rmLevel2 {
           /* background-color: rgba(99, 158, 200, .75);*/
            html .demo-container .RadMenu_Glow .rmHorizontal .rmItem {
                position: static;
            .demo-container .RadSiteMap .rsmColumnWrap {
                margin-bottom: 0px;
            .demo-container .RadSiteMap_Glow .rsmOneLevel .rsmLink,
            .demo-container .RadSiteMap_Glow .rsmTwoLevels .rsmLevel1 .rsmLink,
            .demo-container .RadSiteMap_Glow .rsmThreeLevels .rsmLevel2 .rsmLink,
            .demo-container .RadSiteMap_Glow .rsmManyLevels .rsmLevel3 .rsmLink {
                font-size: 11px;
                color: white;
            .demo-container .rmPopup .itemContent {
                padding: 10px 0 40px 90px;
                background-repeat: no-repeat;
                background-position: 10px center;
            .demo-container .africa {
                background-position: 70px center;
            .demo-container div.RadSiteMap .rsmItem {
                color: #FFFFFF;
                list-style-type: square;
                margin-left: 5px;
            .demo-container .rsmColumnWrap {
                *display: none;
        <asp:ContentPlaceHolder ID="head" runat="server"></asp:ContentPlaceHolder>
        <form id="Form1" runat="server">
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server" AsyncPostBackTimeout="600"></telerik:RadScriptManager>
            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel" ClientIDMode="Static" runat="server" Skin="Simple"></telerik:RadAjaxLoadingPanel>
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel"></telerik:RadAjaxManager>
           <div class="demo-container">
      <telerik:RadMenu RenderMode="Lightweight" runat="server" ID="RadMenu1" Skin="Glow" ClickToOpen="false" zindex="8000">
        <DefaultGroupSettings Height="270px" />
        <telerik:RadMenuItem Text="Home"   ></telerik:RadMenuItem>
            <telerik:RadMenuItem  Text="Menu Item A " ><Items >
                        <telerik:RadMenuItem  Text="Menu Item A1" ></telerik:RadMenuItem>
                        <telerik:RadMenuItem  Text="Menu Item A2" ></telerik:RadMenuItem>
                        <telerik:RadMenuItem  Text="Add Menu A3" ></telerik:RadMenuItem>
           <telerik:RadMenuItem  Text="Menu Item B " >
           <Items >
                        <telerik:RadMenuItem  Text="Menu Item B1" ></telerik:RadMenuItem>
                        <telerik:RadMenuItem  Text="Menu Item B2" ></telerik:RadMenuItem>
                        <telerik:RadMenuItem  Text="Add Menu B3" ></telerik:RadMenuItem>
                        <telerik:RadMenuItem  Text="Menu Item B4" ></telerik:RadMenuItem>
                        <telerik:RadMenuItem  Text="Menu Item B5" ></telerik:RadMenuItem>
                        <telerik:RadMenuItem  Text="Add Menu B6" ></telerik:RadMenuItem>                  
             <telerik:RadMenuItem  Text="Menu Item C " >
             <Items >
                        <telerik:RadMenuItem  Text="Menu Item C1" ></telerik:RadMenuItem>
                        <telerik:RadMenuItem  Text="Menu Item C2" ></telerik:RadMenuItem>
                        <telerik:RadMenuItem  Text="Add Menu C3" ></telerik:RadMenuItem>
                        <telerik:RadMenuItem  Text="Menu Item C4" ></telerik:RadMenuItem>
                        <telerik:RadMenuItem  Text="Menu Item C5" ></telerik:RadMenuItem>
                        <telerik:RadMenuItem  Text="Add Menu C6" ></telerik:RadMenuItem>  
                        <telerik:RadMenuItem  Text="Menu Item C7" ></telerik:RadMenuItem>
                        <telerik:RadMenuItem  Text="Menu Item C8" ></telerik:RadMenuItem>
                        <telerik:RadMenuItem  Text="Add Menu C9" ></telerik:RadMenuItem>
                        <telerik:RadMenuItem  Text="Menu Item C10" ></telerik:RadMenuItem>
                        <telerik:RadMenuItem  Text="Menu Item C11" ></telerik:RadMenuItem>
                        <telerik:RadMenuItem  Text="Add Menu C12" ></telerik:RadMenuItem>
                        <telerik:RadMenuItem  Text="Add Menu C13" ></telerik:RadMenuItem>
                        <telerik:RadMenuItem  Text="Menu Item C14" ></telerik:RadMenuItem>
                        <telerik:RadMenuItem  Text="Menu Item C15" ></telerik:RadMenuItem>
                        <telerik:RadMenuItem  Text="Add Menu C16" GroupSettings-Offsety ="145" GroupSettings-OffsetX="0">                 
                            <telerik:RadMenuItem  Text="Add Menu C16 A" ></telerik:RadMenuItem>
                            <telerik:RadMenuItem  Text="Add Menu C16 B"></telerik:RadMenuItem>                        
                <telerik:RadMenuItem  Text="Add Menu C17" GroupSettings-Offsety ="175" GroupSettings-OffsetX="0">     
                            <telerik:RadMenuItem  Text="Add Menu C16 A" ></telerik:RadMenuItem>
                            <telerik:RadMenuItem  Text="Add Menu C16 B"></telerik:RadMenuItem>
                            <telerik:RadMenuItem  Text="Add Menu C17 B"></telerik:RadMenuItem>                    
               <telerik:RadMenuItem  Text="Add Menu C18" GroupSettings-Offsety ="200" GroupSettings-OffsetX="0">      
                            <telerik:RadMenuItem  Text="Add Menu C18 A" ></telerik:RadMenuItem>
                            <telerik:RadMenuItem  Text="Add Menu C18 B"></telerik:RadMenuItem>
                            <telerik:RadMenuItem  Text="Add Menu C18 c"></telerik:RadMenuItem>
                            <telerik:RadMenuItem  Text="Add Menu C18 D"></telerik:RadMenuItem>                    
        <DefaultGroupSettings RepeatColumns="3" RepeatDirection="Vertical" />
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>

    Please see window coming now attached picture:

  2. Marin Bratanov
    Marin Bratanov avatar
    4533 posts

    Posted 16 Mar 2016 Link to this post


    You should use the z-index property. You can find a full list and how to change it here:

    The following resources also treat having a menu over the window:

    On a side note, I advise that you remove the ClientIDMode=Static property as it is not supported an can cause issues, as explained in the documentation:


    Marin Bratanov
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top