RadMenu separator triggers OnClientMouseOut

2 posts, 1 answers
  1. Marco
    Marco avatar
    1 posts
    Member since:
    Feb 2017

    Posted 20 Sep Link to this post

    Hello.

    We have a Radmenu that uses a Sitemap data source, and we have the menu set up with a OnClientMouseOut function that shows a overlay to mask a section of the page. However, when the mouse goes over separators, the overlay is hidden, and then pops up again once it goes over a menu item, it's like it does not count separators as being part of the menu. Is there a way to prevent this from happening?

    Thanks,

    Marco

  2. Answer
    Peter Milchev
    Admin
    Peter Milchev avatar
    300 posts

    Posted 25 Sep Link to this post

    Hello Marco,

    The default MouseOver and MouseOut events are fired only for non-separator items.

    One option to fire these events on separator hover is demonstrated below:
     
    <telerik:RadMenu RenderMode="Lightweight" ID="RadMenu1" runat="server" OnClientMouseOut="OnClientMouseOut"
        OnClientMouseOver="OnClientMouseOver" OnClientLoad="OnClientLoad"/>
    function OnClientLoad(sender, args) {
        $telerik.$('.rmItem.rmSeparator', sender.get_element()).on({
            mouseenter: function mousein(ev) {
                console.log("separator in");
                var sender = ev.target._item._control;
                var item = ev.target._item;
                var args = new Telerik.Web.UI.RadMenuMouseOverEventArgs(item, ev);
                OnClientMouseOver(sender, args);
            },
            mouseleave: function mouseout(ev) {
                console.log("separator out");
                var sender = ev.target._item._control;
                var item = ev.target._item;
                var args = new Telerik.Web.UI.RadMenuMouseOutEventArgs(item, ev);
                OnClientMouseOut(sender, args);
            }
        });
    }
    function OnClientMouseOver(sender, args) {
        console.log("OnClientMouseOver");
    }
     
    function OnClientMouseOut(sender, args) {
        console.log("OnClientMouseOut");
    }

    Regards,
    Peter Milchev
    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