Vertical RadMenu with horizontal submenus

7 posts, 0 answers
  1. aman
    aman avatar
    9 posts
    Member since:
    Dec 2007

    Posted 01 Oct 2008 Link to this post

    Hi there
     I am using Rad-menu for an application. I want to display rad-menu in following format

    Mainmenuitem1: Subitem1-subitem2-subitem3
    mainitem2: subitemA- subitemB-subitemC
    mainitem3

    Vertical Menu Items with Horizontal Submenus
    Please advise how to do this.
    Thanks
  2.
  3. Serrin
    Serrin avatar
    286 posts
    Member since:
    Sep 2008

    Posted 06 Oct 2008 Link to this post

    Hello Aman,

    You would set the menu Flow to vertical and then set the menuitem GroupSettings Flow property to horizontal, like this:

            <telerik:RadMenu ID="RadMenu1" runat="server" Flow="Vertical">  
    <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation> 
                <Items> 
                    <telerik:RadMenuItem runat="server" Text="Root RadMenuItem1">  
                        <Items> 
                            <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1">  
                            </telerik:RadMenuItem> 
                            <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2">  
                            </telerik:RadMenuItem> 
                        </Items> 
                        <GroupSettings Flow="Horizontal" /> 
                    </telerik:RadMenuItem> 
                    <telerik:RadMenuItem runat="server" Text="Root RadMenuItem2">  
                    </telerik:RadMenuItem> 
     
                </Items> 
            </telerik:RadMenu> 

    :)
  5. Jains
    Jains avatar
    9 posts
    Member since:
    Jan 2010

    Posted 18 Feb 2010 Link to this post

    I'm creating a Radmenu dynamically and both parent items and child items are to be veritcal. 

    How do a code that? This does not work
    RadMenuItem item = new RadMenuItem();
    item.GroupSettings.Flow = Item Flow.Vertical;

  7. Yana
    Admin
    Yana avatar
    4995 posts

    Posted 19 Feb 2010 Link to this post

    Hello Jains,

    It should be set like this:

    item.GroupSettings.Flow = Telerik.Web.UI.ItemFlow.Vertical;


    Greetings,
    Yana
    the Telerik team

    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 Public Issue Tracking system and vote to affect the priority of the items.
  9. Jains
    Jains avatar
    9 posts
    Member since:
    Jan 2010

    Posted 19 Feb 2010 Link to this post

    Hi Yana
    unfortunately this did not work  
    item.GroupSettings.Flow = Telerik.Web.UI.ItemFlow.Vertical;

    <style type="text/css">  
     .RadMenu_Web20 .rmRootGroup .rmSeparator  
     {  
          
        border:none !important;  
         height:1px;  
        background-color:#d4e2f1;     
        background-image: none !important;   
          
     }  
     </style> 
     <div> 
         
          <table  style="margin-top:20px;  
        margin-bottom:0px;  
         font-family: Arial;  
         margin-left: auto;  
         margin-right: auto;  
         border-width:0px;   
         padding-left:0px;  
         padding-right:0px;  
         width:150px;  
         padding-top:0px;  
          padding-bottom:0px;"> 
       <tr> 
       <td  align="left" width="145px"><p>&nbsp;</p> 
       
     
    <telerik:RadMenu ID="RadMenu1" runat="server"      
    ForeColor="#00338E"    
    BackColor="#D5E2EA"    
    Width="150px"    
    OnItemClick="RootMenuItem_Click"   
        
     
    style=" position: relative; top: -34px;  left: 0px; padding:0px;"    Skin="Web20" Flow="Vertical">  
         </telerik:RadMenu> 
         
       </td> 
       </tr> 
       </table> 
        </div> 
           
     
    protected void LoadMenuFromtbMenu(int id, int selected)  
            {  
                System.Drawing.Color bgColor = System.Drawing.ColorTranslator.FromHtml("#e7edf6");  
     
                using (XcendaDC1DataContext db = new XcendaDC1DataContext())  
                {  
                    var query = from t in db.tbMenuDetails  
                                where t.m_identity == id  
     
                                select new  
                                {  
                                    t.m_identity,  
                                    t.md_identity,  
                                    t.md_navigateUrl,  
                                    t.md_title  
                                };  
     
                    if (query.Count() > 0)  
                    {  
                        RadMenuItem item;  
                        foreach (var i in query)  
                        {  
                            item = new RadMenuItem();  
                            item.GroupSettings.Flow = Telerik.Web.UI.ItemFlow.Vertical;  
                            item.ForeColor = System.Drawing.Color.Navy;  
                            item.BackColor = bgColor;  
                            iitem.Text = i.md_title;  
                            iitem.Value = i.md_navigateUrl + "?id=" + i.md_identity;  
     
                            if (selected == i.md_identity)  
                            {  
                                item.Selected = true;  
     
                            }  
                            // query the next menu level   
                            RadMenuItem subMenuItem = GetNextMenuLevel(i.md_title, selected);  
     
                            subMenuItem.GroupSettings.Flow = Telerik.Web.UI.ItemFlow.Vertical;  
                            item.Items.Add(subMenuItem);  
                             
                            this.RadMenu1.Items.Add(item);  
     
                            item = new RadMenuItem();  
                            item.IsSeparator = true;  
                             
                             this.RadMenu1.Items.Add(item);  
                              
                              
                        }  
     
                    }  
                }  
     
                  
            }  
     
  11. Yana
    Admin
    Yana avatar
    4995 posts

    Posted 23 Feb 2010 Link to this post

    Hello Jains,

    I'm sorry for my mistake, you should set it to "Horizontal"  for horizontal subitems:

    item.GroupSettings.Flow = Telerik.Web.UI.ItemFlow.Horizontal;

    I've attached a simple page based on your code to demonstrate this.

    Best regards,
    Yana
    the Telerik team

    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 Public Issue Tracking system and vote to affect the priority of the items.
  13. Gandharv
    Gandharv avatar
    1 posts
    Member since:
    Jan 2012

    Posted 06 Jul 2012 Link to this post

    Thanks... Helpful material.
  14.
Back to Top