Sub Menu

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

    Posted 04 Feb 2016 Link to this post

    Hi 

     

    http://demos.telerik.com/aspnet-ajax/menu/examples/functionality/templates/defaultcs.aspx for this demo is possible for sub menu ? Can you give some example ?

  2. Dhyan
    Dhyan avatar
    27 posts
    Member since:
    Feb 2016

    Posted 04 Feb 2016 in reply to Dhyan Link to this post

    http://demos.telerik.com/aspnet-ajax/menu/examples/functionality/templates/defaultcs.aspx
  3. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1645 posts

    Posted 09 Feb 2016 Link to this post

    Hello Sajith,

    You can use the same approach if you want to show the template when expanding a sub-menu. Instead of setting a Template to the root items it can be set to the child items (in the example below the "Asia" and "Africa" items):
    <telerik:RadMenu RenderMode="Lightweight" runat="server" ID="RadMenu1" Skin="Glow">
        <DefaultGroupSettings Height="270px" />
        <Items>
            <telerik:RadMenuItem Text="Continents">
                <Items>
                    <telerik:RadMenuItem Text="Asia">
                        <ContentTemplate>
                            <telerik:RadSiteMap runat="server" ID="RadSiteMap1" Skin="Glow" CssClass="itemContent asia">
                                <DefaultLevelSettings ListLayout-RepeatColumns="3"></DefaultLevelSettings>
                                <Nodes>
                                    <telerik:RadSiteMapNode Text="Afghanistan"></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="Bangladesh"></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="Cambodia"></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="China"></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="India"></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="Indonesia"></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="Iran"></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="Iraq"></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="Japan"></telerik:RadSiteMapNode>
                                </Nodes>
                            </telerik:RadSiteMap>
                        </ContentTemplate>
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Africa">
                        <ContentTemplate>
                            <telerik:RadSiteMap runat="server" ID="RadSiteMap2" Skin="Glow" CssClass="itemContent africa">
                                <DefaultLevelSettings ListLayout-RepeatColumns="3"></DefaultLevelSettings>
                                <Nodes>
                                    <telerik:RadSiteMapNode Text="Algeria "></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="Angola "></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="Cameroon "></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="Ethiopia "></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="Gabon "></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="Guinea "></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="Kenya "></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="Madagascar "></telerik:RadSiteMapNode>
                                    <telerik:RadSiteMapNode Text="Morocco "></telerik:RadSiteMapNode>
                                </Nodes>
                            </telerik:RadSiteMap>
                        </ContentTemplate>
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenuItem>
        </Items>
    </telerik:RadMenu>

    The following CSS rule needs to be modified, in order not to affect the dropdown holding the two child items:
    /*old*/
    html div.RadMenu_Glow .rmGroup,
    html div.RadMenu_Glow .rmPopup {
        background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
    }
     
    /*new*/
    html div.RadMenu_Glow .rmPopup {
        background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
    }

    Regards,
    Ivan Danchev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  4. Dhyan
    Dhyan avatar
    27 posts
    Member since:
    Feb 2016

    Posted 09 Feb 2016 in reply to Ivan Danchev Link to this post

    Its Not working in Chrome,  But In IE looks OK., This is the Way I was looking for. Can you please check whats wrong with in Chrome..

     

    Also in CSS part 

     I Changed color from 

    ---------------------------------------

    html div.RadMenu_Glow .rmPopup {
        background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
    }

    to this:

    ---------------------------------------

    html div.RadMenu_Glow .rmPopup {
        background: none repeat scroll 0 0 rgba(104, 176, 237, .75);

     

    Color Change OK in Chrome but displays  Dark Gray in IE

     

     

  5. Dhyan
    Dhyan avatar
    27 posts
    Member since:
    Feb 2016

    Posted 09 Feb 2016 in reply to Dhyan Link to this post

    Hi Can help me how i can Achieve layout like this...? http://grapcotooling.com/menu_item.html

    I need Sub menu and and sub menu for a sub menu. Please help

  6. Dhyan
    Dhyan avatar
    27 posts
    Member since:
    Feb 2016

    Posted 09 Feb 2016 in reply to Dhyan Link to this post

    Related to above post : Please copy and paste link in new window if this is not opening (http://grapcotooling.com/menu_item.html)
  7. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1645 posts

    Posted 11 Feb 2016 Link to this post

    Hello Sajith,

    I attached a sample page with the Menu demo modified to look closer to the one from your screenshot and you can further customize it to achieve the desired appearance. While our demos demonstrate the controls capabilities and functionality, customization according to specific requirements is up to the developer to implement.

    Regards,
    Ivan Danchev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  8. Dhyan
    Dhyan avatar
    27 posts
    Member since:
    Feb 2016

    Posted 11 Feb 2016 in reply to Ivan Danchev Link to this post

    Hi Thanks for the sample file. I have code in site.Master page as follows

     

    <p>  <form runat="server"><br>        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" AsyncPostBackTimeout="600"></telerik:RadScriptManager><br>        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel" ClientIDMode="Static" runat="server" Skin="Simple"></telerik:RadAjaxLoadingPanel><br>        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel"></telerik:RadAjaxManager><br></p><p> </p><p><div class="MainManuContainer"><br>            <telerik:RadMenu RenderMode="Lightweight" runat="server" ID="RadMenu1" Skin="Glow" ><br>                <DefaultGroupSettings Height="270px" /><br>                <Items><br>                    <telerik:RadMenuItem Text="Continents"><br>                        <Items><br>                            <telerik:RadMenuItem Text="Asia" GroupSettings-OffsetX="-250"><br>                                <ContentTemplate><br>                                    <telerik:RadSiteMap runat="server" ID="RadSiteMap1" Skin="Glow" CssClass="itemContent asia"><br>                                        <DefaultLevelSettings ListLayout-RepeatColumns="3"></DefaultLevelSettings><br>                                        <Nodes><br>                                            <telerik:RadSiteMapNode Text="Afghanistan"></telerik:RadSiteMapNode><br>                                            <telerik:RadSiteMapNode Text="Bangladesh"></telerik:RadSiteMapNode><br>                                            <telerik:RadSiteMapNode Text="Cambodia"></telerik:RadSiteMapNode><br>                                            <telerik:RadSiteMapNode Text="China"></telerik:RadSiteMapNode><br>                                            <telerik:RadSiteMapNode Text="India"></telerik:RadSiteMapNode><br>                                            <telerik:RadSiteMapNode Text="Indonesia"></telerik:RadSiteMapNode><br>                                            <telerik:RadSiteMapNode Text="Iran"></telerik:RadSiteMapNode><br>                                            <telerik:RadSiteMapNode Text="Iraq"></telerik:RadSiteMapNode><br>                                            <telerik:RadSiteMapNode Text="Japan"></telerik:RadSiteMapNode><br>                                        </Nodes><br>                                    </telerik:RadSiteMap><br>                                </ContentTemplate><br>                            </telerik:RadMenuItem><br>                            <telerik:RadMenuItem Text="Africa" GroupSettings-OffsetX="-250"><br>                                <ContentTemplate><br>                                    <telerik:RadSiteMap runat="server" ID="RadSiteMap2" Skin="Glow" CssClass="itemContent africa"><br>                                        <DefaultLevelSettings ListLayout-RepeatColumns="3"></DefaultLevelSettings><br>                                        <Nodes><br>                                            <telerik:RadSiteMapNode Text="Algeria "></telerik:RadSiteMapNode><br>                                            <telerik:RadSiteMapNode Text="Angola "></telerik:RadSiteMapNode><br>                                            <telerik:RadSiteMapNode Text="Cameroon "></telerik:RadSiteMapNode><br>                                            <telerik:RadSiteMapNode Text="Ethiopia "></telerik:RadSiteMapNode><br>                                            <telerik:RadSiteMapNode Text="Gabon "></telerik:RadSiteMapNode><br>                                            <telerik:RadSiteMapNode Text="Guinea "></telerik:RadSiteMapNode><br>                                            <telerik:RadSiteMapNode Text="Kenya "></telerik:RadSiteMapNode><br>                                            <telerik:RadSiteMapNode Text="Madagascar "></telerik:RadSiteMapNode><br>                                            <telerik:RadSiteMapNode Text="Morocco "></telerik:RadSiteMapNode><br>                                        </Nodes><br>                                    </telerik:RadSiteMap><br>                                </ContentTemplate><br>                            </telerik:RadMenuItem><br>                        </Items><br>                    </telerik:RadMenuItem><br>                </Items><br>            </telerik:RadMenu><br>        </div></p>
      <form 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="MainManuContainer">
                <telerik:RadMenu RenderMode="Lightweight" runat="server" ID="RadMenu1" Skin="Glow" >
                    <DefaultGroupSettings Height="270px" />
                    <Items>
                        <telerik:RadMenuItem Text="Continents">
                            <Items>
                                <telerik:RadMenuItem Text="Asia" GroupSettings-OffsetX="-250">
                                    <ContentTemplate>
                                        <telerik:RadSiteMap runat="server" ID="RadSiteMap1" Skin="Glow" CssClass="itemContent asia">
                                            <DefaultLevelSettings ListLayout-RepeatColumns="3"></DefaultLevelSettings>
                                            <Nodes>
                                                <telerik:RadSiteMapNode Text="Afghanistan"></telerik:RadSiteMapNode>
                                                <telerik:RadSiteMapNode Text="Bangladesh"></telerik:RadSiteMapNode>
                                                <telerik:RadSiteMapNode Text="Cambodia"></telerik:RadSiteMapNode>
                                                <telerik:RadSiteMapNode Text="China"></telerik:RadSiteMapNode>
                                                <telerik:RadSiteMapNode Text="India"></telerik:RadSiteMapNode>
                                                <telerik:RadSiteMapNode Text="Indonesia"></telerik:RadSiteMapNode>
                                                <telerik:RadSiteMapNode Text="Iran"></telerik:RadSiteMapNode>
                                                <telerik:RadSiteMapNode Text="Iraq"></telerik:RadSiteMapNode>
                                                <telerik:RadSiteMapNode Text="Japan"></telerik:RadSiteMapNode>
                                            </Nodes>
                                        </telerik:RadSiteMap>
                                    </ContentTemplate>
                                </telerik:RadMenuItem>
                                <telerik:RadMenuItem Text="Africa" GroupSettings-OffsetX="-250">
                                    <ContentTemplate>
                                        <telerik:RadSiteMap runat="server" ID="RadSiteMap2" Skin="Glow" CssClass="itemContent africa">
                                            <DefaultLevelSettings ListLayout-RepeatColumns="3"></DefaultLevelSettings>
                                            <Nodes>
                                                <telerik:RadSiteMapNode Text="Algeria "></telerik:RadSiteMapNode>
                                                <telerik:RadSiteMapNode Text="Angola "></telerik:RadSiteMapNode>
                                                <telerik:RadSiteMapNode Text="Cameroon "></telerik:RadSiteMapNode>
                                                <telerik:RadSiteMapNode Text="Ethiopia "></telerik:RadSiteMapNode>
                                                <telerik:RadSiteMapNode Text="Gabon "></telerik:RadSiteMapNode>
                                                <telerik:RadSiteMapNode Text="Guinea "></telerik:RadSiteMapNode>
                                                <telerik:RadSiteMapNode Text="Kenya "></telerik:RadSiteMapNode>
                                                <telerik:RadSiteMapNode Text="Madagascar "></telerik:RadSiteMapNode>
                                                <telerik:RadSiteMapNode Text="Morocco "></telerik:RadSiteMapNode>
                                            </Nodes>
                                        </telerik:RadSiteMap>
                                    </ContentTemplate>
                                </telerik:RadMenuItem>
                            </Items>
                        </telerik:RadMenuItem>
                    </Items>
                </telerik:RadMenu>
            </div>

    But menu appearing as blank, can you check what I am missing.  When adding following block its giving me run time error. Css part is all in seperate CSS file.

     <asp:ScriptManager ID="Scriptmanager1" runat="server" /> 

  9. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1645 posts

    Posted 16 Feb 2016 Link to this post

    Hello Sajith,

    I attached a .zip file containing Master and Content pages. At my end the Menu works correctly in this scenario, here's a short video to demonstrate that.

    As for the error you are getting when you try to add an asp:ScriptManager, I noticed that you already have added a RadScriptManager on the master page, so it is expected that an exception will be thrown if you attempt to add another ScriptManager instance. Only one instance should be present on the page (Master), there is no need to declare more instances on the content pages, or UserControls.

    Regards,
    Ivan Danchev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  10. Dhyan
    Dhyan avatar
    27 posts
    Member since:
    Feb 2016

    Posted 02 Mar 2016 Link to this post

    Above Sample was working .. How can i customize above code as in picture attached.. Please help 
  11. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1645 posts

    Posted 03 Mar 2016 Link to this post

    Hello Sajith,

    You can place the items in the sub-menus into 3 columns by setting the RepeatColumns property in DefaultGroupSettings to 3:
    <telerik:RadMenu RenderMode="Lightweight" runat="server" ID="RadMenu2" Skin="Glow" ClickToOpen="true">
        <DefaultGroupSettings Height="270px" />
        <Items>
            <telerik:RadMenuItem Text="Continents" GroupSettings-OffsetX="200">
     
                <Items>
                    <telerik:RadMenuItem Text="Item1">
                        <Items>
                            <telerik:RadMenuItem Text="SubItem1">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem2"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem3"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem4"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem5"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem6"></telerik:RadMenuItem>
                        </Items>
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item2"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item3"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item4"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item5"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item6"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item7"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item8"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item9"></telerik:RadMenuItem>
                </Items>
            </telerik:RadMenuItem>
        </Items>
        <DefaultGroupSettings RepeatColumns="3" RepeatDirection="Vertical" />
    </telerik:RadMenu>

    <style>
        html div.RadMenu_Glow .rmItem .rmSlide .rmGroup {
            background-color: rgba(104, 176, 237, .75);
            color: black;
        }
     
        html div.RadMenu_Glow .rmItem .rmSlide .rmLevel2 {
            background-color: rgb(0, 82, 204);
            color: black;
        }
     
    </style>

    On the third point, what you mean by "need small highlight"?

    Regards,
    Ivan Danchev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  12. Dhyan
    Dhyan avatar
    27 posts
    Member since:
    Feb 2016

    Posted 03 Mar 2016 Link to this post

    Hi Ivan,

    thanks for your help.

    RepeatColumns  property repeating the image for the menu item, i dont want to image to me repeated in each column. and grey/yellow  hilight of the menu item hover length is up to menu item frame width, I need that to be small. Please see image attached you can understand better.

     

     

     

     

  13. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1645 posts

    Posted 07 Mar 2016 Link to this post

    Hello Sajith,

    The issue with the image being displayed for all columns can be solved by changing the CSS rule's selector:
    html div.RadMenu_Glow .rmItem .rmSlide .rmFirstGroupColumn .rmLevel1  {
        background: url("images/MyImage.jpg") no-repeat scroll 0 0 rgba(104, 176, 237, .75);
        background-repeat: no-repeat;
    }

    As for the second question, the highlight effect cannot be limited to just a part of the item's length, because it is achieved with background color. Setting the background color means the whole item will be colored on hover, i.e. the highlight effect will be just as big as the item itself.

    Regards,
    Ivan Danchev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  14. Dhyan
    Dhyan avatar
    27 posts
    Member since:
    Feb 2016

    Posted 08 Mar 2016 in reply to Ivan Danchev Link to this post

    Hi I can able to achieve the layout i want, but only issue is that offsetting the sub menu in the wrong position. Please see the output Iam getting marked as wrong in picture attached and output i want as marked with tick mark in picture. Also attached CSS and menu item code in master page  "MasterPage.master". Please let me know what changes i need to offset sub menu in  in proper position.

    <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
     
    <!DOCTYPE html>
    <head runat="server">
        <title></title>
         <style>
            .demo-container {
                width: 460px;
                border: 0;
            }
     
            .demo-container .RadMenu {
                margin: 0 auto;
                font-size: 14px;
            }
     
             html .demo-container .RadMenu_Glow .rmRootGroup {
                position: relative;
                width: 100%;
            }
             
            html div.RadMenu_Glow .rmItem .rmSlide .rmGroup {
            background-color: rgba(104, 176, 237, .75);
            color: black;
            width: 150px;
             }
      
       
    html div.RadMenu_Glow .rmItem .rmSlide .rmFirstGroupColumn .rmLevel1  {
            background: url("logout_blue.gif") no-repeat scroll 0 0 rgba(104, 176, 237, .75);
            background-repeat: no-repeat;
            padding-left: 190px;
            }
            html div.RadMenu_Glow .rmPopup {
                background: none repeat scroll 0 0 rgb(50, 82, 204);
            }
            .demo-container .RadMenu .rmPopup {
                width: 300px;
            }
            html div.RadMenu_Glow .rmItem .rmSlide .rmLevel2 {
            background-color: rgb(0, 82, 204);
            color: black;
        }
            
            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: 12px;
                color: white;
            }
     
            .demo-container .rmPopup .itemContent {
                padding: 40px 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="RadMenu2" Skin="Glow" ClickToOpen="false">
        <DefaultGroupSettings Height="270px" />
        <Items>
           <telerik:RadMenuItem Text="Menu Item 1" GroupSettings-OffsetX="0">
      
                <Items>
                     
                    <telerik:RadMenuItem Text="Item2" ><Items>
                            <telerik:RadMenuItem Text="SubItem1">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem2"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem3"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem4"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem5"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem6"></telerik:RadMenuItem>
                        </Items></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item3"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item4"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item5"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item6"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item7"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item8"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item9"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item1" >
                        <Items>
                            <telerik:RadMenuItem Text="SubItem1">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem2"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem3"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem4"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem5"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem6"></telerik:RadMenuItem>
                        </Items>
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Text="Menu Item 2" GroupSettings-OffsetX="0">
      
                <Items>
                     
                    <telerik:RadMenuItem Text="Item2" ><Items>
                            <telerik:RadMenuItem Text="SubItem1">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem2"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem3"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem4"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem5"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem6"></telerik:RadMenuItem>
                        </Items></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item3"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item4"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item5"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item6"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item7"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item8"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item9"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item1" >
                        <Items>
                            <telerik:RadMenuItem Text="SubItem1">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem2"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem3"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem4"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem5"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem6"></telerik:RadMenuItem>
                        </Items>
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Text="Menu Item 3" GroupSettings-OffsetX="0">
      
                <Items>
                     
                    <telerik:RadMenuItem Text="Item2" ><Items>
                            <telerik:RadMenuItem Text="SubItem1">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem2"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem3"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem4"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem5"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem6"></telerik:RadMenuItem>
                        </Items></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item3"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item4"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item5"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item6"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item7"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item8"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item9"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item1" >
                        <Items>
                            <telerik:RadMenuItem Text="SubItem1">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem2"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem3"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem4"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem5"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem6"></telerik:RadMenuItem>
                        </Items>
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenuItem>
             <telerik:RadMenuItem Text="Menu Item 4" GroupSettings-OffsetX="0">
      
                <Items>
                     
                    <telerik:RadMenuItem Text="Item2" ><Items>
                            <telerik:RadMenuItem Text="SubItem1">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem2"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem3"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem4"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem5"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem6"></telerik:RadMenuItem>
                        </Items></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item3"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item4"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item5"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item6"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item7"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item8"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item9"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item1" >
                        <Items>
                            <telerik:RadMenuItem Text="SubItem1">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem2"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem3"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem4"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem5"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem6"></telerik:RadMenuItem>
                        </Items>
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenuItem>
        </Items>
        <DefaultGroupSettings RepeatColumns="3" RepeatDirection="Vertical" />
    </telerik:RadMenu>
               
            </div>
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>
        </form>
    </body>
    </html>

    thanks

  15. Dhyan
    Dhyan avatar
    27 posts
    Member since:
    Feb 2016

    Posted 09 Mar 2016 in reply to Dhyan Link to this post

    Please help me on the above...
  16. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1645 posts

    Posted 09 Mar 2016 Link to this post

    Hello Sajith,

    The submenus offset can be set through the OffsetX and OffsetY properties, so you can set them like this for the items under Menu Item 2:
    <telerik:RadMenuItem Text="Menu Item 2" GroupSettings-OffsetX="0">
                            <Items>
                                <telerik:RadMenuItem Text="Item2" GroupSettings-OffsetX="190">
                                    <Items>
                                        <telerik:RadMenuItem Text="SubItem1">
                                        </telerik:RadMenuItem>
                                        <telerik:RadMenuItem Text="SubItem2"></telerik:RadMenuItem>
                                        <telerik:RadMenuItem Text="SubItem3"></telerik:RadMenuItem>
                                        <telerik:RadMenuItem Text="SubItem4"></telerik:RadMenuItem>
                                        <telerik:RadMenuItem Text="SubItem5"></telerik:RadMenuItem>
                                        <telerik:RadMenuItem Text="SubItem6"></telerik:RadMenuItem>
                                    </Items>
                                </telerik:RadMenuItem>
                                <telerik:RadMenuItem Text="Item3"></telerik:RadMenuItem>
                                <telerik:RadMenuItem Text="Item4"></telerik:RadMenuItem>
                                <telerik:RadMenuItem Text="Item5"></telerik:RadMenuItem>
                                <telerik:RadMenuItem Text="Item6"></telerik:RadMenuItem>
                                <telerik:RadMenuItem Text="Item7"></telerik:RadMenuItem>
                                <telerik:RadMenuItem Text="Item8"></telerik:RadMenuItem>
                                <telerik:RadMenuItem Text="Item9"></telerik:RadMenuItem>
                                <telerik:RadMenuItem Text="Item1" GroupSettings-OffsetY="70">
                                    <Items>
                                        <telerik:RadMenuItem Text="SubItem1">
                                        </telerik:RadMenuItem>
                                        <telerik:RadMenuItem Text="SubItem2"></telerik:RadMenuItem>
                                        <telerik:RadMenuItem Text="SubItem3"></telerik:RadMenuItem>
                                        <telerik:RadMenuItem Text="SubItem4"></telerik:RadMenuItem>
                                        <telerik:RadMenuItem Text="SubItem5"></telerik:RadMenuItem>
                                        <telerik:RadMenuItem Text="SubItem6"></telerik:RadMenuItem>
                                    </Items>
                                </telerik:RadMenuItem>
                            </Items>
                        </telerik:RadMenuItem>


    Regards,
    Ivan Danchev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  17. Dhyan
    Dhyan avatar
    27 posts
    Member since:
    Feb 2016

    Posted 09 Mar 2016 in reply to Ivan Danchev Link to this post

    Thanks for quick reply... Let me try..
  18. Dhyan
    Dhyan avatar
    27 posts
    Member since:
    Feb 2016

    Posted 09 Mar 2016 in reply to Dhyan Link to this post

    Above suggestion works perfect. One more thing

    Refering to this picture :

    http://www.telerik.com/clientsfiles/d0ceebd5-2734-4d3e-88aa-ce94b3c0db16_submenu.png?sfvrsn=0

    How can each menu iten can different pictures  ?

     

    Now Iam using : 

    html div.RadMenu_Glow .rmItem .rmSlide .rmFirstGroupColumn .rmLevel1  {
            background: url("logout_blue.gif") no-repeat scroll 0 0 rgba(104, 176, 237, .75);
            background-repeat: no-repeat;
            padding-left: 190px;
            }

    above CSS for level 1 it gives same picture in each menu.

     

    Please help.

     

     

  19. Dhyan
    Dhyan avatar
    27 posts
    Member since:
    Feb 2016

    Posted 09 Mar 2016 in reply to Dhyan Link to this post

    Hi Ivan

    Everything looks ok. but ended up with 2 issues.

    1. Need different images for different menu.

    2. in sub menu and sub-sub menu leaves a black box area if there is no enough menu item ( if there its not multiple of 3) . please see pic attached

    Code with latest css is here :

    <%@ 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: 14px;
            }
             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: white;
            width: 200px;
            
             padding-top:40px;
             padding-bottom:40px;
              padding-left:10px;
             padding-right:10px;
             }
      
    html div.RadMenu_Glow .rmItem .rmSlide .rmFirstGroupColumn .rmLevel1  {
            background:  no-repeat scroll 0 0 rgba(183, 209, 227, .75);
            background-position:left center;
            background-repeat: no-repeat;
            padding-left: 190px;
            
            }
            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: 12px;
                color: white;
            }
            .demo-container .rmPopup .itemContent {
                padding: 40px 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">
        <DefaultGroupSettings Height="270px" />
        <Items>
           
            <telerik:RadMenuItem Text="Menu Item 2" GroupSettings-OffsetX="0">
                <Items>
                    
                    <telerik:RadMenuItem Text="Item2" ><Items>
                            <telerik:RadMenuItem Text="SubItem1">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem2"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem3"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem4"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem5"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem6"></telerik:RadMenuItem>
                        </Items></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item3"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item4"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item5"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item6"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item7"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item8"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item9"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item1" >
                        <Items>
                            <telerik:RadMenuItem Text="SubItem1">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem2"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem3"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem4"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem5"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem6"></telerik:RadMenuItem>
                        </Items>
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Text="Menu Item 3" GroupSettings-OffsetX="0">
                <Items>
                    
                    <telerik:RadMenuItem Text="Item2" ><Items>
                            <telerik:RadMenuItem Text="SubItem1">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem2"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem3"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem4"></telerik:RadMenuItem>
                            
                        </Items></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item3"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item4"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item5"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item6"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item7"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item8"></telerik:RadMenuItem>
                    
                </Items>
            </telerik:RadMenuItem>
             <telerik:RadMenuItem Text="Menu Item 4" GroupSettings-OffsetX="0">
                <Items>
                    
                    <telerik:RadMenuItem Text="Item2" ><Items>
                            <telerik:RadMenuItem Text="SubItem1">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem2"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem3"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem4"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem5"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem6"></telerik:RadMenuItem>
                        </Items></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item3"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item4"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item5"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item6"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item7"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item8"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item9"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Item1" >
                        <Items>
                            <telerik:RadMenuItem Text="SubItem1">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem2"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem3"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem4"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem5"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="SubItem6"></telerik:RadMenuItem>
                        </Items>
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenuItem>
        </Items>
        <DefaultGroupSettings RepeatColumns="3" RepeatDirection="Vertical" />
    </telerik:RadMenu>
      </div
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>
        </form>
    </body>
    </html>

  20. Dhyan
    Dhyan avatar
    27 posts
    Member since:
    Feb 2016

    Posted 10 Mar 2016 Link to this post

    Can you help me regarding above post that please ?
  21. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1645 posts

    Posted 10 Mar 2016 Link to this post

    Hello Sajith,

    Different background images can be set to different submenus by using separate rules with the correct corresponding selector, for example: html div.RadMenu_Glow .rmItem:nth-of-type(1) .rmSlide .rmFirstGroupColumn .rmLevel1
    As for the differently colored part of the submenus it comes from the different height of the li elements with class rmGroupColumn and the ul element with class rmMultiColumn that contains the li elements. You are not setting the background of the ul element, furthermore the li elements have opacity set to their background, which results in the observed appearance.

    Regards,
    Ivan Danchev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  22. Dhyan
    Dhyan avatar
    27 posts
    Member since:
    Feb 2016

    Posted 10 Mar 2016 Link to this post

    Regarding first Question:

    I set 

    html div.RadMenu_Glow .rmItem:nth-of-type(1) .rmSlide .rmFirstGroupColumn .rmLevel1 {
       background: url("help_menu_icon.png") no-repeat scroll 0 0 rgba(183, 209, 227, .75);
    }
    For Firrt submenu but its not working.

     

    For second Question: can you give me an example code please ?

    thanks

  23. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1645 posts

    Posted 10 Mar 2016 Link to this post

    Hello Sajith,

    As I mentioned in one of my previous replies, fulfilling custom CSS requirements falls outside the scope of the support services. If you believe there is an issue with the control's functionality or appearance, or in some other aspect it does not work properly, please open a support ticket attaching a runnable sample, which reproduces the problem. 

    Regards,
    Ivan Danchev
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  24. Dhyan
    Dhyan avatar
    27 posts
    Member since:
    Feb 2016

    Posted 10 Mar 2016 in reply to Ivan Danchev Link to this post

    HI Ivan 
    I can able to manage and  everything looks ok in Chrome and FireFox but Internet explorer giving wrong. Working copy of code is attached also screen shot from both browser;
    Please help. Please see the working code.
    <%@ 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>
  25. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1645 posts

    Posted 11 Mar 2016 Link to this post

    Hello Sajith,

    It seems the screenshots did not attach properly to your reply. Could you specify which IE version you have an issue in and try reattaching the screenshots?

    Regards,
    Ivan Danchev
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  26. Dhyan
    Dhyan avatar
    27 posts
    Member since:
    Feb 2016

    Posted 11 Mar 2016 in reply to Ivan Danchev Link to this post

    Hi Ivan,

     

    Screen shot attached, please check. Thanks

  27. Dhyan
    Dhyan avatar
    27 posts
    Member since:
    Feb 2016

    Posted 11 Mar 2016 in reply to Dhyan Link to this post

    Iam using IE 11
  28. Dhyan
    Dhyan avatar
    27 posts
    Member since:
    Feb 2016

    Posted 11 Mar 2016 Link to this post

    Did you able to check, I tried my max but IE gives wrong 
  29. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1645 posts

    Posted 14 Mar 2016 Link to this post

    Hello Sajith,

    I tested the menu in IE11 and this is how it looks like at my end. The sample image I replaced "three.png" with is visible.

    Regards,
    Ivan Danchev
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  30. Dhyan
    Dhyan avatar
    27 posts
    Member since:
    Feb 2016

    Posted 14 Mar 2016 in reply to Ivan Danchev Link to this post

    Hi Ivan,

    You are right, It was not showing on IE because of previous change in Cached on IE, its ok now. Thanks for your help.

     

    I have a small issue with Zindexing (i believe). I am opening a window using RadWindowManager control bu 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

Back to Top