Menu Over Window Zindexing

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

    Posted 15 Mar 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.
    <telerik:RadWindowManager
                  
                ClientIDMode="Static"
                ID="subWindow"
                runat="server"
                Width="560"
                Height="530"
                VisibleStatusbar="false"
                Behaviors="Move"
                DestroyOnClose="true"
                Modal="true"
                ShowContentDuringLoad="false"
                ShowOnTopWhenMaximized ="true">
     
    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
        <script type="text/javascript">
            function OpenWin() {
                var manager = $find('subWindow');
                manager.open('/URL', null);
                return false;
            }
      
              
        </script>
    </telerik:RadScriptBlock>

    Code for generating menu is :

    <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
      
    <!DOCTYPE html>
    <head runat="server">
        <title></title>
         <style>
              
            .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;
              
             padding-top:40px;
             padding-bottom:40px;
              padding-left:10px;
             padding-right:10px;
            
             }
     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;
            }
      
        </style>
        <asp:ContentPlaceHolder ID="head" runat="server"></asp:ContentPlaceHolder>
    </head>
    <body>
        <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" />
        <Items>
        <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>
                                      
                </Items>
           </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>                  
             </Items>
               
             </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">                 
                        <Items>
                            <telerik:RadMenuItem  Text="Add Menu C16 A" ></telerik:RadMenuItem>
                            <telerik:RadMenuItem  Text="Add Menu C16 B"></telerik:RadMenuItem>                        
                        </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem  Text="Add Menu C17" GroupSettings-Offsety ="175" GroupSettings-OffsetX="0">     
                <Items>
                            <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>                    
                        </Items>
                </telerik:RadMenuItem>
               <telerik:RadMenuItem  Text="Add Menu C18" GroupSettings-Offsety ="200" GroupSettings-OffsetX="0">      
               <Items>
                            <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>                    
                        </Items>
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadMenuItem>
         
        </Items>
        <DefaultGroupSettings RepeatColumns="3" RepeatDirection="Vertical" />
    </telerik:RadMenu>
      </div>
      </div
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>
        </form>
    </body>
    </html>

    Please see window coming now attached picture:

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 16 Mar Link to this post

    Hi,

    You should use the z-index property. You can find a full list and how to change it here: http://docs.telerik.com/devtools/aspnet-ajax/controls/controlling-absolute-positioning-with-z-index.

    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: http://docs.telerik.com/devtools/aspnet-ajax/general-information/troubleshooting/general-troubleshooting#setting-clientidmode-property-to-static-breaks-the-telerik-controls-functionality.

    Regards,

    Marin Bratanov
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top