Problem with DropDownButton and ContextMenu

9 posts, 0 answers
  1. Patrick
    Patrick avatar
    418 posts
    Member since:
    Aug 2012

    Posted 30 Apr 2014 Link to this post

    Hello,
    in my ribbon, I have added a DropDownButton that contains a ContextMenu, following the example in Telerik documentation.
    This works well... until the menu contains a sub menu. In this case, as soon as the sub menu is opened, the menu is not closed when we click outside it, only the sub menu is closed.
    Patrick
  2.
  3. Petar Marchev
    Admin
    Petar Marchev avatar
    1014 posts

    Posted 01 May 2014 Link to this post

    Hello Patrick,

    I created a small test project and I was unable to reproduce the issue you have described. I am sending the project to you for a reference.

    On the click of the drop down button a context menu is shown. When I hover over Menu 2 a sub menu is opened (A, B and C). When I go to click the click here button, the context menu and the sub menu are collapsed. Try to run the project and see if you get the same behavior (I tested this with binaries from the last official SP release). If you need further assistance I will ask that you provide a small project that we can run and that reproduces the glitch. Then we can start looking for solutions. 

    Regards,
    Petar Marchev
    Telerik
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
  5. Patrick
    Patrick avatar
    418 posts
    Member since:
    Aug 2012

    Posted 01 May 2014 in reply to Petar Marchev Link to this post

    Hello Petar,
    thanks for your answer.
    I've made some tests and the main difference between my application and your test case is that the content of the drop down button is a control that contains the menu. In my case it is a control to manage the resources, but it can be seen with a simple Border.

    If you replace MainWindow.xaml with the following code, you will see the problem:
    <Window x:Class="wpf_RibbonView_814947.MainWindow"
            Title="MainWindow" Height="350" Width="525">
        <Grid>
            <telerik:RadRibbonDropDownButton Text="drop down button" VerticalAlignment="Top">
                <telerik:RadRibbonDropDownButton.DropDownContent>
                    <Border>
                        <telerik:RadContextMenu>
                            <telerik:RadContextMenu.Items>
                                <telerik:RadMenuItem Header="Menu 1" />
                                <telerik:RadMenuItem Header="Menu 2" ItemsSource="ABC" />
                            </telerik:RadContextMenu.Items>
                        </telerik:RadContextMenu>
                    </Border>
                </telerik:RadRibbonDropDownButton.DropDownContent>
            </telerik:RadRibbonDropDownButton>
            <Button Content="click here" HorizontalAlignment="Right" VerticalAlignment="Top" />
        </Grid>
    </Window>

    Patrick
  7. Petar Marchev
    Admin
    Petar Marchev avatar
    1014 posts

    Posted 01 May 2014 Link to this post

    Hi Patrick,

    Thank you for the clarification. I was now able to reproduce the issue.

    The reason this happens is that the context menu loses focus when the submenus open and it cannot detect a later click outside of its boundaries. This surely looks like a bug but I have currently put it for investigation because we need to check if this is a new bug or a different representation of an already logged bug. I hope that you will be able to work this around by not inserting an additional Border element and leave the DropDownContent to be a RadContextMenu.

    Regards,
    Petar Marchev
    Telerik
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
  8.
  9. Patrick
    Patrick avatar
    418 posts
    Member since:
    Aug 2012

    Posted 01 May 2014 in reply to Petar Marchev Link to this post

    Hello Petar,
    unfortunately, I can't remove the control in between because, as I said, it is not a Border but a control to manage the resources.
    Can you please add a follow up after your investigation?
    Patrick
  11. Petar Marchev
    Admin
    Petar Marchev avatar
    1014 posts

    Posted 05 May 2014 Link to this post

    Hello Patrick,

    We will contact you again when we have a certain statement for this case. Until we fix the issue, you can try and use the work around I implemented in the attached project. I have used the MouseDown event of the window to see if the drop down button is opened and if the user clicked somewhere outside the drop down button. Have in mind that this code is not well tested so carefully review if it is possible to include some modification of it in your actual application.

    Regards,
    Petar Marchev
    Telerik
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
  13. Sugumar
    Sugumar avatar
    17 posts
    Member since:
    Apr 2013

    Posted 26 Feb 2015 Link to this post

    Hi,

    I had same problem and resolved using below mentioned implementation.
    Posting it here which may help for others. :-)

    1. Add MouseLeave acb for the meu item.
    2. Add delegate command in ViewModel and subsribe it.
    3. Set IsOpen of the pull down menu as False inside the event subscribed in view model.

    Regards,
    Sugumar P
  14.
  15. Sugumar
    Sugumar avatar
    17 posts
    Member since:
    Apr 2013

    Posted 26 Feb 2015 Link to this post

    Hi,
    I had same same issue and resolved by using below mentioned implementation.
    Posting it here which may helpful for others :-)

    1. Add MouseLeave acb for context menu.
    2. Add delegate command in ViewModel and subscribe the event.
    3. Set IsOpen of the pull down menu as false in the event.

    Regards,
    Sugumar P
  17. Petar Mladenov
    Admin
    Petar Mladenov avatar
    3067 posts

    Posted 27 Feb 2015 Link to this post

    Hi Sugumar,

    Thank you for this suggestion.
    However, I want to underline the main usage of RadContextMenu. It is to use the RadContextmenu.ConextMenu attached property on some UI Control, for example like so:
    <TextBox Width="200"
                 VerticalAlignment="Top"
                 ContextMenu="{x:Null}">
            <telerik:RadContextMenu.ContextMenu>
                <telerik:RadContextMenu />
            </telerik:RadContextMenu.ContextMenu>
        </TextBox>

    Setting the RadContextMenu as direct content in DropDownButton could lead to various focus issues which need additional code to bypass. For direct content in Popups/DropDownContents its better to use RadMenu instead of RadContextMenu.

    Additional note on the issue Patrick posted here last year. We consider this scenario as not supported out of the box in our controls suite. It's mainly because nesting ContextMenu directly in DropDownContent should not be supported because of the unpredictable focus issues that might occur.

    Regards,
    Petar Mladenov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top