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);
Related sample: Menu. Show/Hide Menu Item
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();
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"]);
Related sample: Menu. Enable/Disable Menu Item
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();
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
Related sample: Menu. Enable/Disable 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");
Related sample: Select/unselect - DHTMLX Menu
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();
Related sample: Select/unselect - DHTMLX Menu
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
Related sample: Select/unselect - DHTMLX Menu
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"]
You can manipulate the controls of Menu with the help of the Tree collection API.
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
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.
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();
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();
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();
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.