Class: Menu

componyx .UI.Menu(id, properties) → {Object}

Menu class.

Parameters:

Name	Type	Description
`id`	String	The id of the component.
`properties`	Object \| HTMLElement	The properties used to initialize the component or the container element.

Properties:

Name	Type	Description
`ajax.load`	componyx.UI.base.AjaxMethod	AJAX method used to load items on demand.

Mixes In:

componyx.UI.base.methods

Returns:

An instance of the component.

Type: Object

Extends

componyx.UI.base.Component

Classes

Item
MenuEvents

Members

buttonId :String|null

Gets or sets the id of the base item button.

Type:

String | null

collapseAllOnSelect :Boolean

Gets or sets a value indicating if all items are collapsed when an item is selected. Option has effect only when the corresponding item-group is not statically positioned.

Type:

Boolean

collapseAllType :componyx.UI.Menu.CollapseTypeOption

Gets or sets a value indicating how items are collapsed when all items are collapsed through a click outside the menu boundaries.

Type:

componyx.UI.Menu.CollapseTypeOption

collapseDelay :Number

Gets or sets the delay in milliseconds before collapsing all menu-items.

Type:

Number

collapseType :componyx.UI.Menu.CollapseTypeOption

Gets or sets a value indicating how items are collapsed when a new item is expanded.

Type:

componyx.UI.Menu.CollapseTypeOption

cssClassItem :String

Gets or sets the default css class of an item.

Type:

String

cssClassItemChildless :String

Gets or sets the css class of a childless item.

Type:

String

cssClassItemGroup :String

Gets or sets the default css class of an item group.

Type:

String

cssClassItemGroupHiddenRoot :String

Gets or sets the css class of the root item group when visibleRoot is false.

Type:

String

cssClassItemGroupHorizontalRoot :String

Gets or sets the css class of the root item group when horizontalRoot is true.

Type:

String

cssClassItemGroupRoot :String

Gets or sets the css class of the root item group.

Type:

String

cssClassItemGroupVisibleRoot :String

Gets or sets the css class of the root item group when visibleRoot is true.

Type:

String

cssClassSubGroup :String

Gets or sets the default css class of a subgroup.

Type:

String

events :componyx.UI.Menu.MenuEvents

Menu events

Type:

componyx.UI.Menu.MenuEvents

expandDelay :Number

Gets or sets the delay in milliseconds before expanding a menu-item through a pointer-enter/leave event.

Type:

Number

expandDirection :componyx.UI.Menu.ExpandDirectionOption|null

Gets or sets the default expand direction of a menu item.

Type:

componyx.UI.Menu.ExpandDirectionOption | null

expandOnClick :componyx.UI.Menu.ExpandOnClickOption

Gets or sets a value indicating if an item is expanded on a pointerenter event, click-event or on a click-event for the root level and on a pointerenter event for deeper levels. Option has effect only when the corresponding item-group is not statically positioned.

Type:

componyx.UI.Menu.ExpandOnClickOption

expandOnSelect :Boolean

Gets or sets a value indicating if a selectable item with child-items is expanded when selected.

Type:

Boolean

expandable :Boolean

Gets or sets a value indicating if the item can be expanded/collapsed (true) or is always in expanded state (false). Option has effect only when the corresponding item-group is statically positioned.

Type:

Boolean

horizontalRoot :Boolean

Gets or sets a value indicating whether the root level menu items are horizontally rendered.

Type:

Boolean

itemGroupBoxId :String|null

Gets or sets the id of the base item-group box.

Type:

String | null

itemGroupStyle :String

Gets or sets the css style of the item group.

Type:

String

itemList :Array.<componyx.UI.Menu.Item>

Gets or sets the list of items.

Type:

Array.<componyx.UI.Menu.Item>

itemTemplateId :String|null

Gets or sets the default template id of an item.

Type:

String | null

mainCategoryLabel :String

Gets or sets the text label of the main category.

Type:

String

renderOnExpand :Boolean

Gets or sets a value indicating if child-items are rendered ahead (default) when available or rendered when the parent-item expands.

Type:

Boolean

rootExpandDirection :componyx.UI.Menu.ExpandDirectionOption|null

Gets or sets the default expand direction of a root menu item.

Type:

componyx.UI.Menu.ExpandDirectionOption | null

rootItemGroupBoxId :String|null

Gets or sets the id of the base item-group box for the root level container.

Type:

String | null

singleExpand :Boolean

Gets or sets a value indicating if one (true) or more (false) items per group can expanded simultaneously. Option has effect only when the corresponding item-group is statically positioned.

Type:

Boolean

tabNavigation :Boolean

Gets or sets a value indicating if we can move inside the menu with the tab key or if the tab key moves to the next focusable element outside of the menu.

Type:

Boolean

visibleRoot :Boolean

Gets or sets a value indicating whether the root level is visible.

Type:

Boolean

(static, readonly) CollapseTypeOption :number

CollapseTypeOption

Type:

number

Properties:

Name	Type	Description
`CASCADE`	number
`SINGLE`	number
`CONCURRENT`	number
`INSTANT`	number

(static, readonly) ExpandDirectionOption :number

ExpandDirectionOption

Type:

number

Properties:

Name	Type	Description
`DOWN`	number
`RIGHT`	number
`UP`	number
`LEFT`	number
`getName`	number

(static, readonly) ExpandOnClickOption :number

ExpandOnClickOption

Type:

number

Properties:

Name	Type	Description
`ROOT`	number
`ALWAYS`	number
`NEVER`	number

(static, readonly) TypeOption :number

TypeOption

Type:

number

Properties:

Name	Type	Description
`COMMANDBUTTON`	number
`CHECKBUTTON`	number
`RADIOBUTTON`	number

Methods

cancelExpand()

Cancels the current expand action.

collapse(idopt, instantopt)

Collapses the menu with the given item id(s). Animations are disabled when multiple item id's are provided.

Parameters:

Name	Type	Attributes	Default	Description
`id`	String \| Array.<String>	<optional>		The item identifier(s). The root level is expanded if the item id is not specified.
`instant`	Boolean	<optional>	false	A value indicating if the item must be collapsed instantly (without animation). The option has effect only when a single item-id is provided.

collapseAll(instantopt)

Collapses all expanded items.

Parameters:

Name	Type	Attributes	Default	Description
`instant`	Boolean	<optional>	false	A value indicating if all items must be collapsed instantly (without animations).

collapseAllDelayed(instantopt)

Collapses all expanded items with the delay configured through the collapseDelay property.

Parameters:

Name	Type	Attributes	Default	Description
`instant`	Boolean	<optional>	false	A value indicating if all items must be collapsed instantly (without animations).

deselectItem(idopt)

Deselects the current selected item or the item with the specified id.

Parameters:

Name	Type	Attributes	Description
`id`	String	<optional>	The item identifier.

destroy()

Destroys the component.

See:

componyx.UI.base.methods#destroy

disableItem(id, keepSelectedopt)

Disables the item.

Parameters:

Name	Type	Attributes	Default	Description
`id`	String			The item identifier.
`keepSelected`	Boolean	<optional>	false	A value indicating if the item must remain selected.

draw()

Draws the item list.

enableItem(id)

Enables the item.

Parameters:

Name	Type	Description
`id`	String	The item identifier.

expand(idopt, expanderElementopt, toggleopt, instantopt)

Expands the menu with the given item id(s). Animations are disabled when multiple item id's are provided.

Parameters:

Name	Type	Attributes	Default	Description
`id`	String \| Array.<String> \| null	<optional>		The item identifier(s). The root level is expanded if the item id is not specified.
`expanderElement`	HTMLElement	<optional>		The element to which the expand is positioned when the expanding item-group is at root-level and not static positioned. The mouse cursor position is used when no expander element is specified for the previous mentioned scenario.
`toggle`	Boolean	<optional>		A value indicating if the item must collapse if it is already expanded.
`instant`	Boolean	<optional>	false	A value indicating if the item must be expanded (or collapsed) instantly (without animation). The option has effect only when a single item-id is provided.

getActiveCategoryId() → {String}

Gets the identifier of the active category.

Returns:

The id of the active category.

Type: String

getExpandedItems() → {Array.<componyx.UI.Menu.Item>}

Gets the expanded items.

Returns:

A list of expanded items.

Type: Array.<componyx.UI.Menu.Item>

getItemGroupBox(idopt) → {componyx.UI.Box}

Gets the root item-group box or the item-group box for the specified item id.

Parameters:

Name	Type	Attributes	Description
`id`	String	<optional>	The item identifier.

Returns:

The box component.

Type: componyx.UI.Box

getSelectedItem(radioGroupIdopt) → {componyx.UI.Menu.Item}

Gets the selected item or the selected item within the specified radio group.

Parameters:

Name	Type	Attributes	Description
`radioGroupId`	String	<optional>	The id of the radio group.

Returns:

The selected item.

Type: componyx.UI.Menu.Item

getSelectedItemId(radioGroupIdopt) → {String}

Gets the identifier of the selected item or the identifier of the selected item within the specified radio group.

Parameters:

Name	Type	Attributes	Description
`radioGroupId`	String	<optional>	The id of the radio group.

Returns:

The selected item id.

Type: String

hide(instantopt)

Hides the component.

Parameters:

Name	Type	Attributes	Default	Description
`instant`	Boolean	<optional>	false	A value indicating if all items must be collapsed instantly (without animations). By default the root item-group has no show/hide animations set. If a hide animation was set manually and instant hiding on the root item-group is required, disable the hide animation in advance.

loadItem(id) → {componyx.library.Path}

Loads the item with the specified id.

Parameters:

Name	Type	Description
`id`	String	The item identifier.

Returns:

The Path object offers methods to navigate in any direction from a specific item within the tree.

Type: componyx.library.Path

postRender()

Executes the post render procedure.

removeItem(id)

Removes the item with the specified id.

Parameters:

Name	Type	Description
`id`	String	The item identifier.

render()

Renders the component

renderItem(item)

Renders the specified item by creating a new element or overwriting the existing element. The item must exist in the item list and the item's position in the item group will equal the item's position within the item list.

Parameters:

Name	Type	Description
`item`	componyx.UI.Menu.Item	The item to render.

selectItem(id)

Selects the item.

Parameters:

Name	Type	Description
`id`	String	The item identifier.

show()

Shows the component.

showCategory(id, previousopt, instantopt)

Shows the item category.

Parameters:

Name	Type	Attributes	Default	Description
`id`	String			The item identifier.
`previous`	String	<optional>	false	A value indicating that this category is previous to the current visible category.
`instant`	Boolean	<optional>	false	A value indicating if the category must be shown instantly (without animation).

suppressNextChangeEvent(action)

Suppresses any change events fired by the underlying input element during the execution of the provided action. Use this when programmatically setting a component value to prevent the change event from propagating as a user interaction. The suppression is automatically lifted after the action completes, even if it throws.

Parameters:

Name	Type	Description
`action`	function	The action to execute with change events suppressed.

Mixes In:

componyx.UI.base.methods.suppressNextChangeEvent

Type Definitions

MenuEventArgs

Type:

Object

Properties:

Name	Type	Description
`Menu`	componyx.UI.Menu	The Menu instance.
`eventArgs`	null	Not used, always null.

MenuItemEventArgs

Type:

Object

Properties:

Name Type Description

Menu

componyx.UI.Menu

The Menu instance.

eventArgs

Object

The event object containing more detailed information about the event.

Properties

Name	Type	Description
`item`	componyx.UI.Menu.Item \| null	The menu item (for item-group events: the parent item, null for the root item group).
`itemElement`	HTMLElement \| null	The item element, null when there is no item.
`event`	Event	The original event object.