[Solved] RadMenuItem - DropDownPlacement not work properly

[Birgit]

Hello

 

When I set DropDownPlacement = "Left", the MenuItem sometimes opens to the left, sometimes to the right.
If I set DropDownPlacement = "Right" the same game - the MenuItem opens sometimes left, sometimes right.

 

<telerik:RadMenu x:Name="topmenu" Grid.Row="0" Grid.ColumnSpan="4" IconColumnWidth="0" VerticalAlignment="Top" HorizontalAlignment="Stretch">
            <telerik:RadMenuItem Header="Allgemein" DropDownPlacement="Bottom">
                <telerik:RadMenuItem Header="Beenden" Command="{Binding ExitApplicationCommand}"/>
                <telerik:RadMenuItem Header="Info" Command="{Binding InfoCommand}"/>
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Header="Protokolle" Command="{Binding OpenChangeProtocolViewCommand}"/>

            <telerik:RadMenuItem DataContext="{Binding MenuDocuments}" ItemsSource="{Binding ChildMenuItems, UpdateSourceTrigger=PropertyChanged}"
                                 Header="{Binding Header, UpdateSourceTrigger=PropertyChanged}" StaysOpenOnClick="True"
                                 DropDownPlacement="Left">
                <telerik:RadMenuItem.Resources>
                    <HierarchicalDataTemplate DataType="{x:Type local:MenuItemViewModel}" ItemsSource="{Binding ChildMenuItems, UpdateSourceTrigger=PropertyChanged}">
                        <telerik:RadMenuItem Header="{Binding Header, UpdateSourceTrigger=PropertyChanged}"
                                             Command="{Binding ExecuteCommand}" StaysOpenOnClick="True"
                                             DropDownPlacement="Left">
                            <i:Interaction.Triggers>
                                <i:EventTrigger EventName="MouseEnter" >
                                    <i:InvokeCommandAction Command="{Binding MouseEnterCommand}" />
                                </i:EventTrigger>
                            </i:Interaction.Triggers>
                        </telerik:RadMenuItem>
                    </HierarchicalDataTemplate>
                </telerik:RadMenuItem.Resources>
            </telerik:RadMenuItem>
        </telerik:RadMenu>

 

We would like, that all menuitem always open on the left site from parent menu.

Is this possible with the RadMenu Control?

For what purpose is the setting DropDownPlacement?

 

Thank you

[Martin Ivanov]

Hello Birgit,

The DropDownPlacement property defines where the popup with the child menu items will be positioned (aligned). 

I am not sure how you reproduce the reported behavior. Can you share some information on this? However, I will guess is that this appears when the parent menu item is placed near the borders of the screen. In this case the placement could change in order to properly visualize the items. This behavior comes from the WPF native Popup element. Basically, you cannot clip it outside of the screen borders and if it gets there it will re-position so that it is always in those borders. Because the menu item drop down uses a native Popup element to display its children, if the item is positioned close to the monitor's bounds (so that there is not enough space to draw the drop down content), the popup will be automatically re-positioned.

Regards,
Martin Ivanov
Progress Telerik

[Birgit]

Hello Martin

I also thought the DropDownPlacement property specifies where the popup is positioned (aligned) with the subordinate menu items.

The DropDownPlacement property works only with simple menus. At HierarchicalDataTemplate it is faulty. The menu is far enough away from the edge. But the children open sometimes to the left side, sometimes to the right side - it is based on coincidence.

<telerik:RadMenuItem DataContext="{Binding MenuDocuments}" ItemsSource="{Binding ChildMenuItems, UpdateSourceTrigger=PropertyChanged}"
                                 Header="{Binding Header, UpdateSourceTrigger=PropertyChanged}" StaysOpenOnClick="True"
                                 DropDownPlacement="Left">
                <telerik:RadMenuItem.Resources>
                    <HierarchicalDataTemplate DataType="{x:Type local:MenuItemViewModel}" ItemsSource="{Binding ChildMenuItems, UpdateSourceTrigger=PropertyChanged}">
                        <telerik:RadMenuItem Header="{Binding Header, UpdateSourceTrigger=PropertyChanged}"
                                             Command="{Binding ExecuteCommand}" StaysOpenOnClick="True"
                                             DropDownPlacement="Left">
                            <i:Interaction.Triggers>
                                <i:EventTrigger EventName="MouseEnter" >
                                    <i:InvokeCommandAction Command="{Binding MouseEnterCommand}" />
                                </i:EventTrigger>
                            </i:Interaction.Triggers>
                        </telerik:RadMenuItem>
                    </HierarchicalDataTemplate>
                </telerik:RadMenuItem.Resources>
            </telerik:RadMenuItem>

 

Kind regards

Birgit

[Martin Ivanov]

Hello Birgit,

Thank you for the additional information. I tested the code snippet, and I wasn't able to reproduce the reported behavior. This happens because of the HieraricalDataTemplate definition. Basically, the RadMenuItem (and any other ItemsControl) will automatically wrap the element in its data template in a new RadMenuItem. So, the item define in the template will be a child of the newly created item which has its DropDownPlaement set to Auto by default.

To achieve your requirement you can use the ItemContainerStyle property of RadMenuItem, instead of HierarchicalDataTemplate. Here is an example in code:

<telerik:RadMenuItem.ItemContainerStyle>
    <Style TargetType="telerik:RadMenuItem">
        <Setter Property="Header" Value="{Binding Header}" />
        <Setter Property="ItemsSource" Value="{Binding Children}"/>
        <Setter Property="DropDownPlacement" Value="Left" />
    </Style>
</telerik:RadMenuItem.ItemContainerStyle>

Regards,
Martin Ivanov
Progress Telerik

[Birgit]

Hi Martin

 

Your solution is perfect. Thank you very much, I'm really happy.

The solution is much simpler than the HierarchicalDataTemplate.

It works really good.

 

Kind regards

Birgit