Menu Typescript API

Interface

Menu

Horizontal, Vertical and Popup Menu. Popup Menus appear when a user taps an interactive UI element such as an icon, button, action, or content, such as selected items or text.

Selector

smart-menu

Properties

animationAnimation

Sets or gets the animation mode. Animation is disabled when the property is set to 'none'

Default valueadvanced

autoCloseDelaynumber

Determines delay (in milliseconds) before a Menu dropdown is closed when leaving the Menu with the mouse. Applicable only when selectionMode is 'mouseenter'.

Default value100

autoFocusOnMouseenterboolean

If set to true, on mouseenter, the element receives focus automatically.

Default valuefalse

checkableboolean

Allows top-level Menu items (immediate children of the Menu) to be checkable. Sublevels are controlled by setting checkable to the respective smart-menu-items-group.

Default valuefalse

checkboxesboolean

Sets or gets whether checkboxes and radio buttons can be displayed in the Menu. This property is applicable only to the Menu itself, and not its smart-menu-item/smart-menu-items-group subitems. See also the property checkable.

Default valuefalse

checkModeMenuCheckMode

Sets the check mode of top-level Menu items (immediate children of the Menu). The behavior of checking could be as checkboxes or radio buttons. Sublevels are controlled by setting checkMode to the respective smart-menu-items-group.

Default valuecheckbox

closeActionMenuCloseAction

Sets the document event which closes any open Menu drop downs (or the Menu itself when mode is 'dropDown').

Default valueup

dataSourceany

Determines the data source that will be loaded to the Menu. The data source represents an array of objects with the following properties:

• label - a string representing the text content of the item.
• value - the value of the item.
• shortcut - a string representing a shortuct for the item. It will be displayed inside the item.
• items - allows to define an array of sub menu items.

disabledboolean

Enables or disables element.

Default valuefalse

displayMemberstring

Determines the field in the data source that corresponds to an item's label.

Default value"label

dropDownAppendTostring | HTMLElement

Sets custom outer container, where all dropdown containers must be appended. By default they are inside the menu. The value of the property can be an HTML element or the id of an HTML element. In mode 'dropDown', the property dropDownAppendTo also controls the parent element of the whole Menu. The open method works relatively to the original place of the Menu in the DOM.

dropDownOverlayboolean

If this property is enabled, when an element's dropdown is opened, a transparent overlay is positioned between the dropdown and the rest of the document.

Default valuefalse

dropDownPositionMenuDropDownPosition

Determines the opening direction of Menu dropdowns.

Default valueauto

itemsMemberstring

Determines the field in the data source that corresponds to an item group's subitems collection.

Default value"items

localestring

Sets or gets the language. Used in conjunction with the property messages.

Default value"en

localizeFormatFunctionany

Callback used to customize the format of the messages that are returned from the Localization Module.

messagesany

Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.

Default value


"en": {

"propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",

"propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!",

"propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!",

"elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",

"moduleUndefined": "Module is undefined.",

"missingReference": "{{elementType}}: Missing reference to {{files}}.",

"htmlTemplateNotSuported": "{{elementType}}: Browser doesn't support HTMLTemplate elements.",

"invalidTemplate": "{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM."

}

minimizeIconTemplatestring

Used to load a custom minimize icon from an HTMLTemplateElement object. The HTMLTemplateElement is selected by it's id.

Default value"null

minimizeWidthnumber

Determines the minimum width of the Menu at which it will switch from normal to minimized mode. If set to null, the Menu does not minimize automatically.

modeMenuMode

Determines the menu's display mode.

Default valuehorizontal

openedboolean

Opens or closes thte menu when it's in 'dropDown' mode.

Default valuefalse

overflowOverflow

Sets or gets the menu's scroll buttons behavior. Applicable only when dropDownAppendTo is not null.

Default valueauto

readonlyboolean

If the element is readonly, users cannot interact with it.

Default valuefalse

rightToLeftboolean

Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.

Default valuefalse

selectionModeMenuSelectionMode

Determines the menu's selection mode.

Default valueclick

themestring

Determines the theme. Theme defines the look of the element

Default value"

unfocusableboolean

If is set to true, the element cannot be focused.

Default valuefalse

valueMemberstring

Determines the field in the data source that corresponds to an item's value.

Default value"value

onclose((this: Window, ev: Event) => any) | null

This event is triggered when the menu is closed. The event is fired only in 'dropDown' mode.

Arguments

onclosing((this: Window, ev: Event) => any) | null

This event is triggered when the menu is about to be closed. The closing operation can be canceled by calling event.preventDefault() in the event handler function. The event is fired only in 'dropDown' mode.

Arguments

oncollapse((this: Window, ev: Event) => any) | null

This event is triggered when a smart-menu-items-group is collapsed.

Arguments

oncollapsing((this: Window, ev: Event) => any) | null

This event is triggered when a smart-menu-items-group is collapsing.

Arguments

onexpand((this: Window, ev: Event) => any) | null

This event is triggered when a smart-menu-items-group is expanded.

Arguments

onexpanding((this: Window, ev: Event) => any) | null

This event is triggered before a smart-menu-items-group is expanded.

Arguments

onitemcheckchange((this: Window, ev: Event) => any) | null

This event is triggered when a menu item check state is changed.

Arguments

onitemclick((this: Window, ev: Event) => any) | null

This event is triggered when a menu item is clicked.

Arguments

onopen((this: Window, ev: Event) => any) | null

This event is triggered when the menu is opened. The event is fired only in 'dropDown' mode.

Arguments

onopening((this: Window, ev: Event) => any) | null

This event is triggered when the menu is about to be opened. The opening operation can be canceled by calling event.preventDefault() in the event handler function. The event is fired only in 'dropDown' mode.

Arguments

Methods

addItem( Item: HTMLElement, Parent?: HTMLElement | string): void

Adds an item to the menu.

Arguments

ItemHTMLElement

A smart-menu-item to add to the Menu.

Parent?HTMLElement | string

The smart-menu-items-group or its id or numeric path to add the item to.

checkItem( item: HTMLElement | string): void

Checks an item.

Arguments

itemHTMLElement | string

smart-menu-item/smart-menu-items-group or its id or numeric path.

clear(): void

Clears all Menu items.

close(): void

Closes the Menu when mode is 'dropDown'.

collapseItem( item?: HTMLElement | string, animation?: boolean): void

Collapses an item.

Arguments

item?HTMLElement | string

smart-menu-item/smart-menu-items-group or its id or numeric path. If no item is passed, all open items are collapsed.

animation?boolean

If set to false, disables collapse animation even if animation is enabled for the element.

expandItem( item: HTMLElement | string, animation?: boolean): void

Expands an item.

Arguments

itemHTMLElement | string

smart-menu-item/smart-menu-items-group or its id or numeric path.

animation?boolean

If set to false, disables expand animation even if animation is enabled for the element.

getItem( id: string): HTMLElement

Gets an item by its id or numeric path.

Arguments

idstring

The id or numeric path of an item

ReturnsHTMLElement

maximize(): void

Maximizes the Menu.

minimize(): void

Minimizes the Menu.

open( left: number, top: number): void

Opens the Menu when mode is 'dropDown'.

Arguments

leftnumber

Horizontal position

topnumber

Vertical position

removeItem( item: HTMLElement | string): void

Removes an item from the menu.

Arguments

itemHTMLElement | string

The smart-menu-item/smart-menu-items-group or its id or numeric path to remove.

uncheckItem( item: HTMLElement | string): void

Unchecks an item.

Arguments

itemHTMLElement | string

smart-menu-item/smart-menu-items-group (or its id or numeric path)

Enums

MenuItem

Defines a menu item.

Selector

smart-menu-item

Properties

checkedboolean

Default valuetrue

labelany

Default value

levelnumber

separatorboolean

Default valuetrue

shortcutstring

Default value"

valueany

MenuItemsGroup

Defines a group of menu items.

Selector

smart-menu-items-group

Properties

checkableboolean

Default valuefalse

checkedboolean

Default valuefalse

checkModeMenuCheckMode

Default valuecheckbox

dropDownHeightnumber

expandedboolean

Default valuefalse

labelany

Default value

levelnumber

separatorboolean

Default valuefalse

valueany

Enums