Work with Menu

Hiding/showing menu options

You can hide and show menu items (one or several at once) with the help of the hide() / show() methods:

menu.hide(id);
menu.show(id);

Both methods can take one parameter - the ID of a menu item or an array with IDs of menu items.

Starting from v7.0, it is possible to hide/show all Menu items on the page at once by using the methods without parameters:

// hides all Menu items
menu.hide();
// shows all Menu items
menu.show();

Disabling/enabling menu options

You can disable one menu option or several options at a time with the disable() method:

menu.disable("1");
menu.disable(["2","3"]);

To enable one menu option or several options at a time, use the enable() method:

menu.enable("1");
menu.enable(["1","3"]);

Both methods can take one parameter: the ID of a menu item or an array of IDs.

Starting from v7.0, it is possible to disable/enable all Menu items on the page at once by using the methods without parameters:

// disables all Menu items
menu.disable();
// enables all Menu items
menu.enable();

Checking if a menu option is disabled

To check if an item of Menu is disabled, call the isDisabled() method. The method takes one parameter:

id	(string) an id of a menu item

menu.isDisabled("1"); // -> true/false

Selecting/Unselecting an item

Selecting a menu item

To select a particular Menu item, make use of the select() method of Menu. The method takes two parameters:

id	(string) an id of an item
unselect	(boolean) optional, true - to unselect previously selected items, otherwise - false; true by default

menu.select("align-left");

Unselecting a menu item

To remove selection from a selected item, apply the unselect() method of Menu. The method may take the id of an item as a parameter:

// unselects a specified selected item
menu.unselect("align-left");

It is also possible to remove selection from all previously selected items of Menu via the unselect() method:

// unselects all previously selected items
menu.unselect();

Checking if a menu item is selected

To check if an item of Menu is selected, call the isSelected() method. The method takes one parameter:

id	(string) an id of a menu item

menu.isSelected("align-left"); // -> returns true/false

Getting selected items

To get the selected items, call the getSelected() method. The method returns an array of string values with IDs of selected items:

ribbon.getSelected(); // -> ["selected_1", "selected_1.1"]

Using Tree collection API

You can manipulate the controls of Menu with the help of the Tree collection API.

Adding menu items

You can add menu items with the add() method of tree collection:

menu.data.add({
    type:"separator"
});
 
menu.data.add({
    value:"Open", items:[
        { value:"File", hotkey:"Ctrl+F" },
        { value:"Folder" }
    ]
});

Related sample: Menu. Add/Remove Item

Rearranging menu items

You can move menu items to different positions with the move() method. For example, this is how you can move an item with ID "2" to the left edge of the menu:

menu.data.move("2",0);

The ID should always be a string, even if in menu item configuration you set it as a number.

To get the current position, use the getIndex() method of TreeCollection:

menu.data.getIndex("id");

Indexes are counted from 0.

Iterating menu items

You can work with all (or some) menu items with the help of the map() method of TreeCollection:

// remove all icons from the menu
menu.data.map(function(item){
    item.icon = "";
});
menu.paint();

Setting item text

You can set text labels for any menu item. Access the needed item with the getItem() method of the TreeCollection:

menu.data.getItem("id").value = "Open";
menu.paint();

Setting item hotkey

You can add a shortcut to a menu option by accessing it with the help of the getItem() method. After you add a hotkey, a label with the keys will be added to the option.

menu.data.getItem("id").hotkey = "Ctrl+N";
menu.paint();

Removing menu items

You can remove any item from a menu with the remove() method. The item will be removed with all its sub-items.

menu.data.remove("id");

Related sample: Menu. Add/Remove Item

To remove all items from Menu, call the removeAll() method. Afterwards, you can load other options.

menu.data.removeAll();
menu.data.parse(new_options);

Check the full list of Tree collection API.