RadMenuItem - DropDownPlacement not work properly

5 posts, 1 answers
  1. Birgit
    Birgit avatar
    19 posts
    Member since:
    Apr 2016

    Posted 13 Jun Link to this post

    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

  2. Martin Ivanov
    Admin
    Martin Ivanov avatar
    1404 posts

    Posted 16 Jun Link to this post

    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
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  3. Birgit
    Birgit avatar
    19 posts
    Member since:
    Apr 2016

    Posted 11 Jul Link to this post

    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

  4. Answer
    Martin Ivanov
    Admin
    Martin Ivanov avatar
    1404 posts

    Posted 14 Jul Link to this post

    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
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  5. Birgit
    Birgit avatar
    19 posts
    Member since:
    Apr 2016

    Posted 17 Jul in reply to Martin Ivanov Link to this post

    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

Back to Top