How to display RadNavigation Menu in Vertical expansion in first level and horizantal expansion in Next levels

[Punyashree]

 

I am using RadNavigation for my application and currently it looks like this.

I need 2 changes in the above settings.

1. The first level expansion, i. e the Sandwich menu at the top, when the screen is expanded, will be expanded horizontally. I need it to be expanded vertically.

(Currently the main Menu's, Menu 1, Menu 2 etc showing vertically as the screen is not expanded. If the screen is expanded, they will start showing Horizontally.)

2. The second level expansion Menu 2 --> Menu 2.1 --> Menu 2.1.1 is expanding vertically. I want it to be expanded Horizantally as shown in the below image. 

 

How can i achieve this with RadNavigation Menu? Can you please help?

[Vasko]

Hi Punyashree,

You can achieve this layout using the Menu control instead of PanelBar. The Menu supports hierarchical structures with different orientations, allowing you to display the first-level menu items vertically and the sub-menus horizontally.

Here is a sample C# code to dynamically create the RadMenu in your WebForms application: 

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        ConfigureRadMenu();
    }
}

private void ConfigureRadMenu()
{
    RadMenu menu = new RadMenu
    {
        ID = "RadMenu1",
        RenderMode = RenderMode.Lightweight
    };

    // First Level Menu Items (Vertical)
    RadMenuItem menuItem1 = new RadMenuItem("Menu 1");
    RadMenuItem menuItem2 = new RadMenuItem("Menu 2");
    RadMenuItem menuItem3 = new RadMenuItem("Menu 3");

    // Second Level Sub-items (Horizontal)
    RadMenuItem subItem1 = new RadMenuItem("Menu 1.1");
    subItem1.Items.Add(new RadMenuItem("Menu 1.1.1"));
    subItem1.Items.Add(new RadMenuItem("Menu 1.1.2"));

    RadMenuItem subItem2 = new RadMenuItem("Menu 1.2");
    subItem2.Items.Add(new RadMenuItem("Menu 1.2.1"));
    subItem2.Items.Add(new RadMenuItem("Menu 1.2.2"));

    menuItem1.Items.Add(subItem1);
    menuItem1.Items.Add(subItem2);

    // Adding items to Menu
    menu.Items.Add(menuItem1);
    menu.Items.Add(menuItem2);
    menu.Items.Add(menuItem3);

    // Add Menu to Form
    form1.Controls.Add(menu);
}

This should achieve the layout as per your requirements.

Regards,
Vasko
Progress Telerik