Selecting all menu controls with jQuery

[Andrew]

My site has the need to close a menu if the mouse leaves the window (its very close to the left edge, so its easily left open).

As we have multiple menu's on our page, there is the unlikely possibility that more tha none could be left open, so I really wanted to use a jQuery selector to find all menu controls, and fire its close() method when the mouse leaves the window.

I got to this :

 

$telerik.$(document).mouseleave(

    function () {
        $('.RadMenu').close();
        }
);

 

However, the $('.RadMenu').close(); doesn't work - erroring that close() isn't supported. if I go through the results from $('.RadMenu'), they do seem to be the correct elements being returned (HTMLDiv objects).

Can anyone help?

Thanks,

Andrew

[Andrew]

It looks like you can't access the object directly, so using another post to get the actual RadMenu object, and iterating through them, this seems to work well...

var closeAll;

$telerik.$(document).mouseleave(function () {
    closeAll = setTimeout('closeAllMenus()', 1000);
});

function closeAllMenus() {
    var menus = $('.RadMenu').map(function () { return this.control; });
    for (var i = menus.length - 1; i >= 0; i--) {
        menus[i].close();
    }
}

The 1000ms delay is because if the menu is still loading up items (ours is populated by a webservice), then you can't close it. The only caveat is that if you move out and in quickly to the window, the menu will still disappear, but its quite a minor thing.

[Kate]

Hello Andrew,

Thank you for sharing the solution with us. Let us know if you encounter any further difficulties so we could help you. 

Greetings,
Kate
the Telerik team

[Nona]

THANK YOU ANDREW!!!!

Please excuse the shoutout, but I've been looking for this for a week!

I knew there was a way! 

the this.control is no where in the documentation. 

Kudos!