Radmenu doesn't close when another radmenu on the page is clicked

[Javier]

I've got 2 radmenus on the same page that have clicktoopen set to true.

If I click on a menu it opens, then if I click away it closes.  Unless I click on the second menu, then the first menu remains open and the second menu opens up as well.

I would like to have the first menu close when the second menu is clicked.
I tried adding a onblur client event to the menus where I close the menu if focus is taken away, but that caused 2 issues.

1) The clicked property remains set to 'true' so when I hove the mouse the menu opens up again without having to click.
2) I have a checkbox inside of the menu template, when I click the checkbox, the menu technically loses focus and tries to close then immediately reopens.  

Concerning point 1.
If I set clicked to false in the same event, then the menu can't be closed by clicking on it a second time, it starts to close then immediately reopens again.  

Thanks,
Javier

[Boyan Dimitrov]

Hello Javier,

Thank you for contacting Telerik Support team,

Just as you assumed you could use JavaScript functions to achieve a behavior, that will fit your requirements.  Add this piece of code to you page:

//javascript:

function RadMenu1_onClicking(sender, eventArgs) {
            var menu = $find("<%= RadMenu2.ClientID %>");
            var openedItem = menu.get_openedItem();
            if (openedItem != null) {
                 openedItem.close();
              }

//aspx:

<telerik:RadMenu
    ID="RadMenu1"
    runat="server"
    ClickToOpen="True"
    OnClientItemClicking="RadMenu1_onClicking"
    ........
</telerik:RadMenu>

Clicking on RadMenu1 will trigger a function, that will check if there is an opened item in RadMenu2 and if yes, it will close it.

Please apply the above approach also for RadMenu2.

Here you can find detailed information about the RadMenu Client-Side API.

If you have any further questions, don't hesitate to contact us again.

Kind regards,
Boyan Dimitrov
the Telerik team

[Javier]

Thank you very much.  I ended up putting the menu's in user controls and I don't know how many usercontrols/menus will end up being on a given page or the names.  

Is there a way to implement this same technique to close any radmenus on a page that isn't the sender?

Thanks,
Javier

[Javier]

Okay, I've got a solution that works.
I have an external js file that contains a lot of functions I'm using here.  So I added the following code.

var RadMenuItemIDs = new Array();

function AddMenuToArray(sender, args) {

    if (arrayContains(RadMenuItemIDs, sender.get_id()))

        return;

    var index = RadMenuItemIDs.length;

    RadMenuItemIDs[index] = sender.get_id();

 

}

function CloseAllOpenMenus(sender, args) {

    for (var i = 0; i < RadMenuItemIDs.length; i++) {

        if (RadMenuItemIDs[i] != sender.get_id()) {

            var menu = $find(RadMenuItemIDs[i]);

            var openedItem = menu.get_openedItem();

            if (openedItem != null) {

                openedItem.close();
      menu.set_clicked(false);

            }

        }

    }

}

function arrayContains(array, item) {

    for (var i = 0; i < array.length; i++) {

        if (array[i] == item)

            return true;

    }

    return false;

}

Then in the markup of the radmenu in the user control I added the two handlers defined above.

<telerik:RadMenu OnClientLoad="AddMenuToArray" OnClientItemClicking="CloseAllOpenMenus"

So when it closes it just iterates through the array of Radmenu Id's checking for any menus other than itself that are open.

Thanks for your help.

[Boyan Dimitrov]

Hello Javier,

Thank you for sharing your code with the community. We appreciate that and hope, that our forum visitors will find it useful.

Regards,
Boyan Dimitrov
the Telerik team