Menu one direction for main menu other direction for child

2 posts, 0 answers
  1. Richard
    Richard avatar
    2 posts
    Member since:
    Apr 2018

    Posted 21 May Link to this post

    Folks

     

    In the code behind in c# I am attempting to make the main menu vertical(up and down) and the child menuitems  for each item in the main menu to run horizontal (left to right)

    What I have tried:

    the control is defined as

    telerik:RadMenu ID="MainMenu" runat="server" >
    </telerik:RadMenu>

    in the code behind for each parent I am setting

    parentItem.GroupSettings.Flow = ItemFlow.Vertical;

    and for each child I am setting

    childItem.GroupSettings.Flow = ItemFlow.Horizontal;

    This gives me just the opposite of what I want. the parents run lengthwise an the children all  run top to bottom.

    If I reverse the GroupSettings.Flow  setting for the parent and child then  both the main menu and the submenu both run lengthwise.

  2. Peter Milchev
    Admin
    Peter Milchev avatar
    440 posts

    Posted 24 May Link to this post

    Hello Richard,

    The Flow property of the RadMenu determines the direction of the Root items. Then, the  GroupSettings.Flow set to an item determines the direction of its child elements. 

    Here is a screencast demonstrating the behavior of the following markup: https://screencast-o-matic.com/watch/cFhZX7bm4p.

    <telerik:RadMenu runat="server" Flow="Vertical" Width="200px" ID="RadMenu1">
        <Items>
            <telerik:RadMenuItem GroupSettings-Flow="Horizontal" Text="Root Item 1">
                <Items>
                    <telerik:RadMenuItem Text="Child Item 1.1">
                        <Items>
                            <telerik:RadMenuItem Text="Child Item 1.1.1"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="Child Item 1.1.2"></telerik:RadMenuItem>
                        </Items>
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem GroupSettings-Flow="Horizontal" Text="Child Item 1.2">
                        <Items>
                            <telerik:RadMenuItem Text="Child Item 1.2.1"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="Child Item 1.2.2"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="Child Item 1.2.3">
                                <Items>
                                    <telerik:RadMenuItem Text="Child Item 1.2.3.1"></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Child Item 1.2.3.2"></telerik:RadMenuItem>
                                </Items>
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem  GroupSettings-Flow="Horizontal"  Text="Child Item 1.2.4">
                                <Items>
                                    <telerik:RadMenuItem Text="Child Item 1.2.4.1"></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Child Item 1.2.4.2"></telerik:RadMenuItem>
                                </Items>
                            </telerik:RadMenuItem>                              
                        </Items>
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Child Item 1.3"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Child Item 1.4"></telerik:RadMenuItem>
                </Items>
            </telerik:RadMenuItem>
            <telerik:RadMenuItem  Text="Root Item 2">
                <Items>
                    <telerik:RadMenuItem  GroupSettings-Flow="Horizontal"  Text="Child Item 2.1">
                        <Items>
                            <telerik:RadMenuItem Text="Child Item 2.1.1"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="Child Item 2.1.2"></telerik:RadMenuItem>
                        </Items>
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Child Item 2.2">
                        <Items>
                            <telerik:RadMenuItem Text="Child Item 2.2.1"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="Child Item 2.2.2"></telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="Child Item 2.2.3">
                                <Items>
                                    <telerik:RadMenuItem Text="Child Item 2.2.3.1"></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Child Item 2.2.3.2"></telerik:RadMenuItem>
                                </Items>
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem  GroupSettings-Flow="Horizontal"  Text="Child Item 2.2.4">
                                <Items>
                                    <telerik:RadMenuItem Text="Child Item 2.2.4.1"></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Child Item 2.2.4.2"></telerik:RadMenuItem>
                                </Items>
                            </telerik:RadMenuItem>                              
                        </Items>
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Child Item 2.3"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Child Item 2.4"></telerik:RadMenuItem>
                </Items>
            </telerik:RadMenuItem>
        </Items>
    </telerik:RadMenu>

    If that does not help, please open a support thread with a runnable project using dummy data demonstrating the issue. That would allow us to investigate locally and help you more efficiently. 

    Once the issue is resolved, we can share the answer here for convenience and better visibility from the community.

    Regards,
    Peter Milchev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top