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

5 posts, 0 answers
  1. Javier
    Javier avatar
    35 posts
    Member since:
    Aug 2011

    Posted 15 Aug 2012 Link to this post

    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
  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 16 Aug 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Javier
    Javier avatar
    35 posts
    Member since:
    Aug 2011

    Posted 16 Aug 2012 Link to this post

    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
  5. Javier
    Javier avatar
    35 posts
    Member since:
    Aug 2011

    Posted 16 Aug 2012 Link to this post

    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.
  6. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 21 Aug 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017