Configuring Menu Items

Creating Sibling Item

The user can create a new sibling item in any polygon. To do this, the addNewSibling method should be used. The parameters here are as follows:

nextToId - id of the element after which the new item will be inserted.
itemId - id of the new sibling item;
itemText - the label of the new sibling item;
disabled - true/false, if this new sibling item is disabled or enabled;
img - path to image for the enabled state of the new sibling item;
imgDis - path to image for the disabled state of the new sibling item.

The new sibling item will be inserted right after the item chosen as "nextToId" one.

myMenu.addNewSibling(nextToId, ItemId, itemText, disabled, img,imgDis);

Creating Child Item

There is the possibility to create a child item for any item in the menu. The child item will be located in a sub-level polygon and won't be visible until its parent item is hovered over. The addNewChild method should be called and the following parameters are to be passed:

parentId - id of the element that will contain the newly created item in its sub-level polygon;
position - position/order of the new child item in the polygon among other child items, whether it comes first, second, etc. (starts with 0);
itemId - id of the new child item;
itemText - the label of the new child item;
disabled - true/false, whether this new child item is disabled or not;
img - path to image for the enabled state of the new child item;
imgDis - path to image for the disabled state of the new child item.

myMenu.addNewChild(parentId, position, itemId, itemText, disabled, img, imgDis);

Removing Item

The user can choose to remove any item from a menu. The item will be removed with all its sub-items/sub-polygons. An item can be removed in the following way:

myMenu.removeItem(Id);

Related sample: Add / remove items

Creating New Separator

Separators can be created with the help of addNewSeparator method. A separator provides kind of a logical grouping of menu items. The addNewSeparator method has the following parameters:

nextToId - id of the element after which the new separator will be inserted;
itemId - id of the new separator.

myMenu.addNewSeparator(nextToId, itemId);

Getting Parent Id

There is the possibility to get parent id of any menu item. This can be done by passing the item's id to the getParentId method:

var parentId = myMenu.getParentId(id);

Enabling/Disabling Item

Any menu item can be enabled/disabled by user:

myMenu.setItemEnabled(id);
myMenu.setItemDisabled(id);

Also the user has the possibility to check whether an item is enabled. This can be done by calling the following method:

var isEnabled = myMenu.isItemEnabled(id); // returns true|false

The user should pass id of the item that will be checked. The method returns true if the item is enabled.

Related sample: Enable / disable items

Showing/Hiding Item

Any item in a menu can be shown/hidden. To do this, the user should pass this item's id to the following methods:

myMenu.showItem(id);
myMenu.hideItem(id);

The user has the possibility to check whether an item is hidden, by passing the item's id to the isItemHidden method. The method returns true, if the item is hidden:

var isHidden = myMenu.isItemHidden(id);

Related sample: Show / hide items

Setting Item's Text

The user can set text for any menu item. This item's id and text are passed as parameters to the following method:

myMenu.setItemText(id, text);

The user can get item's text using getItemText method. The method returns the current text of the item:

var text = myMenu.getItemText(id); // returns item's text

Related sample: Change items text

Setting Item's Position

Item's position in the polygon can be set by applying the method setItemPosition and passing item's id and item's position number (starting with 0) as parameters:

myMenu.setItemPosition(id,pos);

There is the possibility to get items' position. The method returns item's position number:

var pos = myMenu.getItemPosition(id); // returns item's position

Related sample: Change items position

Setting User Data

The user has the possibility to set, store, and pass values set for a certain menu item. One menu item can have several different user data stored in it. User data can be set to any menu item. The user just needs to pass this item's id, name of the data and its value to the setUserData method:

myMenu.setUserData(id, name, value);

An easy way to get user data is to use getUserData method by passing the item's id and data name to it:

var value = myMenu.getUserData(id, name);

Related sample: Change items userdata

Setting Item's Image

Any item in a menu can have its own image displayed in the left part of item display area. The setItemImage method allows the user to set image to an item by passing the following parameters:

id - id of the item to which the image will be set;
img - path to the image for the enabled state of the item;
imgDis - path to the image for the disabled state of the item.

myMenu.setItemImage(id,img,imgDis);

The getItemImage method gets current item images for enabled and disabled states and returns array(img, imgDis) that will contain URLs to images:

var imgs = myMenu.getItemImage(id); // returns array

Item's image can be easily removed/cleared by using the clearItemImage method to which the user should pass item's id:

myMenu.clearItemImage(id);

Related sample: Change items images

Setting Item's Tooltip

The user can specify the supplementary information regarding the item - tooltip. The setTooltip method takes the following parameters:

id - item id;
tip - this parameter sets the text that appears when user hovers the mouse over the item.

myMenu.setTooltip(id,tip);

The following method can return current item's tooltip text:

var tip = myMenu.getTooltip(id);

Setting Item's Hotkey

Hotkey is a shortcut to a menu option. In our menu it's just a label (text) written in the item display area.

A hotkey can be set to any menu item by calling setHotKey method and passing item's id and setting the hotkey label:

myMenu.setHotKey(id, hkey);

The getHotKey method returns current item's hotkey text:

var hkey = myMenu.getHotKey(id); // returns hotkey text

Creating Checkbox

An item of this type has a small, square box (in the left part of item display area) in addition to item's title. Any other icons can't be added to this type of items.

This item can be created by calling addCheckbox method that takes the following parameters:

mode - sibling/child, determines whether the checkbox is a sibling or a child;
nextoId - id of the element,after which the new checkbox will be inserted as a sibling (parentId for a child);
pos - item's position in the child mode (null for sibling);
itemId - id of the new checkbox;
itemText - the text of the new checkbox;
state - true/false, true and false mean "checked" and "unchecked" respectively;
disabled - true/false, true and false mean "disabled" and "enabled" respectively.

myMenu.addCheckbox(mode, nextToId, pos, itemId, itemText, state, disabled);

New state (checked/unchecked) of the checkbox can be set by the following method:

myMenu.setCheckboxState(id,state);

A simple way to get the current state of a checkbox is presented below:

var state = menu.getCheckboxState(id); // returns true|false

Creating Radio Button

Item of this type has a small selectable circle (in the left part of item display area) in addition to item's title. Any other icons can't be added to this type of items.

This item can be created by calling the addRadioButton method that takes the following parameters:

mode - sibling|child, determines whether the radio button is a sibling or a child;
nextToId - id of the element, after which the new radio button will be inserted as a sibling (parentId for a child);
pos - item's position in the child mode (null for sibling);
itemId - id of the new radio button;
itemText - the text of the new radio button;
group - name of the radio group;
state - true/false, true and false mean "checked" and "unchecked" respectively;
disabled - true/false, true and false mean "disabled" and "enabled" respectively.

myMenu.addRadioButton(mode, nextToId, pos, itemId, itemText, group, state, disabled);

Any unchecked radio button can be made checked while currently checked radio button automatically changes its state to unchecked:

myMenu.setRadioChecked(id,state);

An easy way to get id of the current checked radio button in a radio group is presented below:

var idChecked = myMenu.getRadioChecked(group);