Vertical RadMenu with horizontal submenus

[aman]

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

[Serrin]

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>

:)

[Jains]

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;

[Yana]

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.

[Jains]

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);


                    }

                }
            }


        }

[Yana]

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.

[Gandharv]

Thanks... Helpful material.