ListMenu Typescript API

Interface

ListMenu

ListMenu allows you to present users a listing of options and sub options.

Selector

smart-list-menu

Properties

animationAnimation

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

Default valueadvanced

autoFocusOnMouseenterboolean

Determines whether the element becomes focused on hover or not.

Default valuefalse

checkableboolean

Allows top-level ListMenu items to be checkable.

Default valuefalse

checkboxesboolean

Sets or gets whether checkboxes and radio buttons can be displayed in the top level menu groups. This property is applicable only to the ListMenu 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 ListMenu items(groups).

Default valuecheckbox

dataSourceany

Determines the data source that will be loaded to the ListMenu. 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 the element.

Default valuefalse

displayLoadingIndicatorboolean

Displays or hides the loading indicator. Loading indicator is hidden by default.

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 the minimized dropdown will be appednded. By default it is in the ListMenu. The value of the property can be an HTML element or the id of an HTML element.

dropDownOverlayboolean

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

Default valuefalse

dropDownPositionMenuDropDownPosition

Sets or gets the opening direction of the ListMenu minimized dropdown.

Default valueauto

enableMouseWheelActionboolean

Enables or disables scrolling using the mouse wheel through overflowing menu items.

Default valuefalse

filterableboolean

Determines whether menu item filtering is enabled. When enabled a filter input is shown at the top of the element. Only items in the current view can be filtered.

Default valuefalse

filterInputPlaceholderstring

Determines the placeholder for the filter input.

Default value"

filterModeFilterMode

Determines the filtering mode.

Default valuecontainsIgnoreCase

groupedboolean

If enabled, the items will be grouped by their first letter and sorted.

Default valuefalse

itemsMemberstring

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

Default value"items

loadingIndicatorPlaceholderstring

Determines the text that will be displayed next to the loading indicator when the loader is visible and it's position is top or bottom.

Default value"Loading...

loadingIndicatorPositionVerticalAlignment

Determines the position of the loading indicator inside the element.

Default valuecenter

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

Allows to load a custom minimize icon from an HTMLTemplateElement.The property acceps the id of an HTMLTemplateElement or it's direct instance.

Default value"null

minimizeWidthnumber | null

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

overflowOverflow

Sets or gets the ListMenu's scroll buttons behavior.

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

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

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

This event is triggered when 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 list menu item is clicked.

Arguments

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

This event is triggered when the user scrolls to the bottom of the ListMenu.

Arguments

Methods

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

Adds an item to the list.

Arguments

ItemHTMLElement

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

Parent?HTMLElement | string

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

back( animation?: boolean): void

Navigates to the previous page (smart-menu-items-group).

Arguments

animation?boolean

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

changePage( id: string): void

Navigates to a particular page (smart-menu-items-group).

Arguments

idstring

The id or numeric path of a page (smart-menu-items-group).

checkItem( item: HTMLElement | string): void

Checks an item.

Arguments

itemHTMLElement | string

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

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 List Menu.

minimize(): void

Minimizes the List Menu. An icon is displayed and the menu is hidden when minimized.

removeItem( item: HTMLElement | string): void

Removes an item.

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

ListItem

Defines a list item for ListBox, ComboBox, DropDownList.

Selector

smart-list-item

Properties

alternationIndexnumber

Default value-1

colorstring

Default value"

displayModeListItemDisplayMode

Default valueplain

groupedboolean

Default valuefalse

selectedboolean

Default valuefalse

valuestring

Default value"

labelstring

Default value"

detailsstring

Default value"

groupstring

Default value"

hiddenboolean

Default valuefalse

readonlyboolean

Default valuefalse

Enums

ListItemsGroup

Defines a group of list items.

Selector

smart-list-items-group

Properties

labelstring

Default value"