RadApplicationMenu Dropdown On Mouseover?

4 posts, 0 answers
  1. Alexis
    Alexis avatar
    4 posts
    Member since:
    Jul 2017

    Posted 22 Sep Link to this post

    Hi,

     

    I'm using a RadApplicationMenu in my project at the moment, and it's working great with the theme applied. However, I've been asked if there's any way to make the dropdown activate when you mouseover it, rather than when you click it. Obviously I can write a mouseover event for it, but I don't know if it's possible to trigger the menu from this event?

     

    Any help you could provide would be appreciated.

     

    Thanks,

     

    -Alexis

  2. Dess
    Admin
    Dess avatar
    2107 posts

    Posted 26 Sep Link to this post

    Hello, Alexis, 

    Thank you for writing.  

    You can subscribe to the MosueEnter event and call the RadApplicationMenu.ShowDropDown method. This will trigger the drop down to be displayed.
    public RadForm1()
    {
        InitializeComponent();
     
        this.radApplicationMenu1.MouseEnter += radApplicationMenu1_MouseEnter;
         
    }
     
    private void radApplicationMenu1_MouseEnter(object sender, EventArgs e)
    {
        this.radApplicationMenu1.ShowDropDown();
    }

    I hope this information helps. Should you have further questions I would be glad to help.

    Regards,
    Dess
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Alexis
    Alexis avatar
    4 posts
    Member since:
    Jul 2017

    Posted 27 Sep Link to this post

    Hi again,

    Thanks for that. It works beautifully. The only issue I have is that the menu seems to now just show permanently if I don't select anything from it. Obviously clicking gets rid of it again, but is there another event that I can trigger on MouseLeave to get rid of the menu? If I put HideDropDown() on the MouseLeave event then it'll hide it before I can even select an option from the dropdown.

    What I think I need is on leaving the combination of the whole control, not just the main menu item, then hide dropdown? I just can't figure out how to do that.

    Thanks for the help so far!

    -Alexis

  4. Dess
    Admin
    Dess avatar
    2107 posts

    Posted 28 Sep Link to this post

    Hello, Alexis, 

    Thank you for writing back. 

    Before hiding the popup in the MouseLeave event you can check whether the mouse location is within the drop-down rectangle and determine whether to hide it or not: 
    public RadForm1()
    {
        InitializeComponent();
         
        this.radApplicationMenu1.MouseEnter += radApplicationMenu1_MouseEnter;
        this.radApplicationMenu1.MouseLeave += radApplicationMenu1_MouseLeave;
    }
     
    private void radApplicationMenu1_MouseLeave(object sender, EventArgs e)
    {
        if (!this.radApplicationMenu1.DropDownButtonElement.DropDownMenu.Bounds.Contains(MousePosition))
        {
            this.radApplicationMenu1.HideDropDown();
        }
    }
     
    private void radApplicationMenu1_MouseEnter(object sender, EventArgs e)
    {
        this.radApplicationMenu1.ShowDropDown();
    }

    I hope this information helps. If you have any additional questions, please let me know. 

     Regards,
    Dess
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 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