ListMenu JAVASCRIPT UI Component API

ListMenu Javascript API

Class

ListMenu
ListItem
ListItemsGroup

ListMenu

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

Selector

smart-list-menu

Properties

AanimationSets or gets the animation mode. Animation is disabled when the property is set to 'none'
AautoFocusOnMouseenterDetermines whether the element becomes focused on hover or not.
CcheckableAllows top-level ListMenu items to be checkable.
CcheckboxesSets 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.
CcheckModeSets the check mode of top-level ListMenu items(groups).
DdataSourceDetermines 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.
DdisabledEnables or disables the element.
DdisplayLoadingIndicatorDisplays or hides the loading indicator. Loading indicator is hidden by default.
DdisplayMemberDetermines the field in the data source that corresponds to an item's label.
DdropDownAppendToSets 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.
DdropDownOverlayIf 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.
DdropDownPositionSets or gets the opening direction of the ListMenu minimized dropdown.
EenableMouseWheelActionEnables or disables scrolling using the mouse wheel through overflowing menu items.
FfilterableDetermines 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.
FfilterInputPlaceholderDetermines the placeholder for the filter input.
FfilterMemberDetermines the MenuItem property that will be used as a filtering criteria. By default the label property is used. It can be set to 'value' if the user wants to filter by the 'value' property or 'textContent' if the user wants to filter by text inside the MenuItem's content or any other property.
FfilterModeDetermines the filtering mode.
GgroupedIf enabled, the items will be grouped by their first letter and sorted.
IitemsMemberDetermines the field in the data source that corresponds to an item group's subitems collection.
LloadingIndicatorPlaceholderDetermines the text that will be displayed next to the loading indicator when the loader is visible and it's position is top or bottom.
LloadingIndicatorPositionDetermines the position of the loading indicator inside the element.
LlocaleSets or gets the language. Used in conjunction with the property messages.
LlocalizeFormatFunctionCallback used to customize the format of the messages that are returned from the Localization Module.
MmessagesSets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.
MminimizeIconTemplateAllows to load a custom minimize icon from an HTMLTemplateElement.The property acceps the id of an HTMLTemplateElement or it's direct instance.
MminimizeWidthDetermines 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.
OoverflowSets or gets the ListMenu's scroll buttons behavior.
RreadonlyIf the element is readonly, users cannot interact with it.
RrightToLeftSets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.
SscrollModeDetermines whether to use scrollbar or scrollButtons when content overflows an element's box.
TthemeDetermines the theme. Theme defines the look of the element
UunfocusableIf is set to true, the element cannot be focused.
VvalueMemberDetermines the field in the data source that corresponds to an item's value.

Events

EexpandThis event is triggered when a smart-menu-items-group is expanded.
IitemCheckChangeThis event is triggered when a menu item check state is changed.
IitemClickThis event is triggered when a list menu item is clicked.
SscrollBottomReachedThis event is triggered when the user scrolls to the bottom of the ListMenu.
SswipeleftThis event is triggered when the user swipes to the left inside the ListMenu.
SswiperightThis event is triggered when the user swipes to the right inside the ListMenu.

Methods

AaddItemAdds an item to the list.
BbackNavigates to the previous page (smart-menu-items-group).
CchangePageNavigates to a particular page (smart-menu-items-group).
CcheckItemChecks an item.
GgetItemGets an item by its id or numeric path.
MmaximizeMaximizes the List Menu.
MminimizeMinimizes the List Menu. An icon is displayed and the menu is hidden when minimized.
RremoveItemRemoves an item.
UuncheckItemUnchecks an item.

Properties

animation"none" | "simple" | "advanced"

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

Allowed Values

  • "none" - animation is disabled
  • "simple" - ripple animation is disabled
  • "advanced" - all animations are enabled

Default value

"advanced"

Example

Set the animation property. 

 <smart-list-menu animation='none'></smart-list-menu>

Set the animation property by using the HTML Element's instance. 

 const listmenu = document.querySelector('smart-list-menu');
 listmenu.animation = 'simple';

Get the animation property. 

 const listmenu = document.querySelector('smart-list-menu');
 let animation = listmenu.animation;

autoFocusOnMouseenterboolean

Determines whether the element becomes focused on hover or not.

Default value

false

Example

Set the autoFocusOnMouseenter property. 

 <smart-list-menu auto-focus-on-mouseenter></smart-list-menu>

Set the autoFocusOnMouseenter property by using the HTML Element's instance. 

 const listmenu = document.querySelector('smart-list-menu');
 listmenu.autoFocusOnMouseenter = false;

Get the autoFocusOnMouseenter property. 

 const listmenu = document.querySelector('smart-list-menu');
 let autoFocusOnMouseenter = listmenu.autoFocusOnMouseenter;

checkableboolean

Allows top-level ListMenu items to be checkable.

Default value

false

Example

Set the checkable property. 

 <smart-list-menu checkable></smart-list-menu>

Set the checkable property by using the HTML Element's instance. 

 const listmenu = document.querySelector('smart-list-menu');
 listmenu.checkable = false;

Get the checkable property. 

 const listmenu = document.querySelector('smart-list-menu');
 let checkable = listmenu.checkable;

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 value

false

Example

Set the checkboxes property. 

 <smart-list-menu checkboxes></smart-list-menu>

Set the checkboxes property by using the HTML Element's instance. 

 const listmenu = document.querySelector('smart-list-menu');
 listmenu.checkboxes = false;

Get the checkboxes property. 

 const listmenu = document.querySelector('smart-list-menu');
 let checkboxes = listmenu.checkboxes;

checkMode"checkbox" | "radioButton"

Sets the check mode of top-level ListMenu items(groups).

Allowed Values

  • "checkbox" - A check box is shown inside a menu group that is selected.
  • "radioButton" - A radio dot is shown inside a menu group that is selected.

Default value

"checkbox"

Example

Set the checkMode property. 

 <smart-list-menu check-mode='radioButton'></smart-list-menu>

Set the checkMode property by using the HTML Element's instance. 

 const listmenu = document.querySelector('smart-list-menu');
 listmenu.checkMode = 'checkbox';

Get the checkMode property. 

 const listmenu = document.querySelector('smart-list-menu');
 let checkMode = listmenu.checkMode;

dataSource{label: string, shortcut: string, value: any, items: []}[]

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.

Try a demo showcasing the dataSource property.

Example

Set the dataSource property. 

 <smart-list-menu data-source='[{ label: "File" }, { label: "Help" }]'></smart-list-menu>

Set the dataSource property by using the HTML Element's instance. 

 const listmenu = document.querySelector('smart-list-menu');
 listmenu.dataSource = [{ label: 'File', items: [{ label: 'New', shortcut: 'Ctrl+N' }] }];

Get the dataSource property. 

 const listmenu = document.querySelector('smart-list-menu');
 let dataSource = listmenu.dataSource;

disabledboolean

Enables or disables the element.

Default value

false

Example

Set the disabled property. 

 <smart-list-menu disabled></smart-list-menu>

Set the disabled property by using the HTML Element's instance. 

 const listmenu = document.querySelector('smart-list-menu');
 listmenu.disabled = false;

Get the disabled property. 

 const listmenu = document.querySelector('smart-list-menu');
 let disabled = listmenu.disabled;

displayLoadingIndicatorboolean

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

Default value

false
Try a demo showcasing the displayLoadingIndicator property.

Example

Set the displayLoadingIndicator property. 

 <smart-list-menu display-loading-indicator></smart-list-menu>

Set the displayLoadingIndicator property by using the HTML Element's instance. 

 const listmenu = document.querySelector('smart-list-menu');
 listmenu.displayLoadingIndicator = false;

Get the displayLoadingIndicator property. 

 const listmenu = document.querySelector('smart-list-menu');
 let displayLoadingIndicator = listmenu.displayLoadingIndicator;

displayMemberstring

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

Default value

"label"

Example

Set the displayMember property. 

 <smart-list-menu display-member='title'></smart-list-menu>

Set the displayMember property by using the HTML Element's instance. 

 const listmenu = document.querySelector('smart-list-menu');
 listmenu.displayMember = 'caption';

Get the displayMember property. 

 const listmenu = document.querySelector('smart-list-menu');
 let displayMember = listmenu.displayMember;

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.

Example

Set the dropDownAppendTo property. 

 <smart-list-menu drop-down-append-to='body'></smart-list-menu>

Set the dropDownAppendTo property by using the HTML Element's instance. 

 const listmenu = document.querySelector('smart-list-menu');
 listmenu.dropDownAppendTo = 'customContainer';

Get the dropDownAppendTo property. 

 const listmenu = document.querySelector('smart-list-menu');
 let dropDownAppendTo = listmenu.dropDownAppendTo;

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 value

false

Example

Set the dropDownOverlay property. 

 <smart-list-menu drop-down-overlay></smart-list-menu>

Set the dropDownOverlay property by using the HTML Element's instance. 

 const listmenu = document.querySelector('smart-list-menu');
 listmenu.dropDownOverlay = false;

Get the dropDownOverlay property. 

 const listmenu = document.querySelector('smart-list-menu');
 let dropDownOverlay = listmenu.dropDownOverlay;

dropDownPosition"auto" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "overlay-left" | "overlay-right"

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

Allowed Values

  • "auto" - The position is automatically determined by measuring the available distance around the element for the drop down to open freely without being clipped by the edges of the browser. By default the drop down will try to open below the element. If the available space is not enough for the popup to appear it will open in one of the following directions, if possible: top, over.
  • "top-left" - The drop down opens above and to the left of the seleted Item Group.
  • "top-right" - The drop down opens above and to the right of the seleted Item Group.
  • "bottom-left" - The drop down opens below and to the left of the seleted Item Group.
  • "bottom-right" - The drop down opens below and to the right of the seleted Item Group.
  • "overlay-left" - The drop down opens over the seleted Item Group by aligning to the left.
  • "overlay-right" - The drop down opens over and to the left of the seleted Item Group by aligning to the right.

Default value

"auto"

Example

Set the dropDownPosition property. 

 <smart-list-menu drop-down-position='top-left'></smart-list-menu>

Set the dropDownPosition property by using the HTML Element's instance. 

 const listmenu = document.querySelector('smart-list-menu');
 listmenu.dropDownPosition = 'top-right';

Get the dropDownPosition property. 

 const listmenu = document.querySelector('smart-list-menu');
 let dropDownPosition = listmenu.dropDownPosition;

enableMouseWheelActionboolean

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

Default value

false
Try a demo showcasing the enableMouseWheelAction property.

Example

Set the enableMouseWheelAction property. 

 <smart-list-menu enable-mouse-wheel-action></smart-list-menu>

Set the enableMouseWheelAction property by using the HTML Element's instance. 

 const listmenu = document.querySelector('smart-list-menu');
 listmenu.enableMouseWheelAction = true;

Get the enableMouseWheelAction property. 

 const listmenu = document.querySelector('smart-list-menu');
 let enableMouseWheelAction = listmenu.enableMouseWheelAction;

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 value

false
Try a demo showcasing the filterable property.

Example

Set the filterable property. 

 <smart-list-menu filterable></smart-list-menu>

Set the filterable property by using the HTML Element's instance. 

 const listmenu = document.querySelector('smart-list-menu');
 listmenu.filterable = false;

Get the filterable property. 

 const listmenu = document.querySelector('smart-list-menu');
 let filterable = listmenu.filterable;

filterInputPlaceholderstring

Determines the placeholder for the filter input.

Default value

""

Example

Set the filterInputPlaceholder property. 

 <smart-list-menu filter-input-placeholder='Enter a value:'></smart-list-menu>

Set the filterInputPlaceholder property by using the HTML Element's instance. 

 const listmenu = document.querySelector('smart-list-menu');
 listmenu.filterInputPlaceholder = 'Awaiting entry:';

Get the filterInputPlaceholder property. 

 const listmenu = document.querySelector('smart-list-menu');
 let filterInputPlaceholder = listmenu.filterInputPlaceholder;

filterMemberstring

Determines the MenuItem property that will be used as a filtering criteria. By default the label property is used. It can be set to 'value' if the user wants to filter by the 'value' property or 'textContent' if the user wants to filter by text inside the MenuItem's content or any other property.

Default value

"label"

Example

Set the filterMember property. 

 <smart-list-menu filter-member='value'></smart-list-menu>

Set the filterMember property by using the HTML Element's instance. 

 const listmenu = document.querySelector('smart-list-menu');
 listmenu.filterMember = 'textContent';

Get the filterMember property. 

 const listmenu = document.querySelector('smart-list-menu');
 let filterMember = listmenu.filterMember;

filterMode"contains" | "containsIgnoreCase" | "doesNotContain" | "doesNotContainIgnoreCase" | "equals" | "equalsIgnoreCase" | "startsWith" | "startsWithIgnoreCase" | "endsWith" | "endsWithIgnoreCase"

Determines the filtering mode.

Allowed Values

  • "contains" - displays only items with labels that contain the filter string (case sensitive)
  • "containsIgnoreCase" - displays only items with labels that contain the filter string (case insensitive)
  • "doesNotContain" - displays only items with labels that do not contain the filter string (case sensitive)
  • "doesNotContainIgnoreCase" - displays only items with labels that do not contain the filter string (case insensitive)
  • "equals" - displays only items with labels that equal the filter string (case sensitive)
  • "equalsIgnoreCase" - displays only items with labels that equal the filter string (case insensitive)
  • "startsWith" - displays only items with labels that start with the filter string (case sensitive)
  • "startsWithIgnoreCase" - displays only items with labels that start with the filter string (case insensitive)
  • "endsWith" - displays only items with labels that end with the filter string (case sensitive)
  • "endsWithIgnoreCase" - displays only items with labels that end with the filter string (case insensitive)

Default value

"containsIgnoreCase"
Try a demo showcasing the filterMode property.

Example

Set the filterMode property. 

 <smart-list-menu filter-mode='contains'></smart-list-menu>

Set the filterMode property by using the HTML Element's instance. 

 const listmenu = document.querySelector('smart-list-menu');
 listmenu.filterMode = 'equals';

Get the filterMode property. 

 const listmenu = document.querySelector('smart-list-menu');
 let filterMode = listmenu.filterMode;

groupedboolean

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

Default value

false
Try a demo showcasing the grouped property.

Example

Set the grouped property. 

 <smart-list-menu grouped></smart-list-menu>

Set the grouped property by using the HTML Element's instance. 

 const listmenu = document.querySelector('smart-list-menu');
 listmenu.grouped = false;

Get the grouped property. 

 const listmenu = document.querySelector('smart-list-menu');
 let grouped = listmenu.grouped;

itemsMemberstring

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

Default value

"items"

Example

Set the itemsMember property. 

 <smart-list-menu items-member='children'></smart-list-menu>

Set the itemsMember property by using the HTML Element's instance. 

 const listmenu = document.querySelector('smart-list-menu');
 listmenu.itemsMember = 'subitems';

Get the itemsMember property. 

 const listmenu = document.querySelector('smart-list-menu');
 let itemsMember = listmenu.itemsMember;

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..."

Example

Set the loadingIndicatorPlaceholder property. 

 <smart-list-menu loading-indicator-placeholder='Incoming data'></smart-list-menu>

Set the loadingIndicatorPlaceholder property by using the HTML Element's instance. 

 const listmenu = document.querySelector('smart-list-menu');
 listmenu.loadingIndicatorPlaceholder = 'LOADING...';

Get the loadingIndicatorPlaceholder property. 

 const listmenu = document.querySelector('smart-list-menu');
 let loadingIndicatorPlaceholder = listmenu.loadingIndicatorPlaceholder;

loadingIndicatorPosition"bottom" | "center" | "top"

Determines the position of the loading indicator inside the element.

Allowed Values

  • "bottom" - Positions the loading indicator at the bottom of the list menu.
  • "center" - Positions the loading indicator at the center of the list menu.
  • "top" - Positions the loading indicator at the bottom of the list menu.

Default value

"center"

Example

Set the loadingIndicatorPosition property. 

 <smart-list-menu loading-indicator-position='bottom'></smart-list-menu>

Set the loadingIndicatorPosition property by using the HTML Element's instance. 

 const listmenu = document.querySelector('smart-list-menu');
 listmenu.loadingIndicatorPosition = 'top';

Get the loadingIndicatorPosition property. 

 const listmenu = document.querySelector('smart-list-menu');
 let loadingIndicatorPosition = listmenu.loadingIndicatorPosition;

localestring

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

Default value

"en"

Example

Set the locale property. 

 <smart-list-menu locale='de'></smart-list-menu>

Set the locale property by using the HTML Element's instance. 

 const listmenu = document.querySelector('smart-list-menu');
 listmenu.locale = 'fr';

Get the locale property. 

 const listmenu = document.querySelector('smart-list-menu');
 let locale = listmenu.locale;

localizeFormatFunctionfunction | null

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

Example

Set the localizeFormatFunction property. 

 <smart-list-menu localize-format-function='function(defaultMessage, message, messageArguments){return '...'}'></smart-list-menu>

Set the localizeFormatFunction property by using the HTML Element's instance. 

 const listmenu = document.querySelector('smart-list-menu');
 listmenu.localizeFormatFunction = function(defaultMessage, message, messageArguments){return '...'};

Get the localizeFormatFunction property. 

 const listmenu = document.querySelector('smart-list-menu');
 let localizeFormatFunction = listmenu.localizeFormatFunction;

messagesobject

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."

}

Example

Set the messages property. 

 <smart-list-menu messages='{"de":{"propertyUnknownType":"Die Eigenschaft '{{name}}' hat ein nicht definiertes 'type'-Member!","propertyInvalidValue":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualValue}}, Erwarteter Wert: {{value}}!","propertyInvalidValueType":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualType}}, Erwarteter Wert: {{type}}!","elementNotInDOM":"Element existiert nicht in DOM! Bitte fugen Sie das Element zum DOM hinzu, bevor Sie eine Methode aufrufen.","moduleUndefined":"Modul ist nicht definiert.","missingReference":"{{elementType}}: Fehlender Verweis auf {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser unterstutzt keine HTMLTemplate-Elemente.","invalidTemplate":"{{elementType}}: '{{property}}' Die Eigenschaft akzeptiert eine Zeichenfolge, die mit der ID eines HTMLTemplate-Elements aus dem DOM ubereinstimmen muss."}}'></smart-list-menu>

Set the messages property by using the HTML Element's instance. 

 const listmenu = document.querySelector('smart-list-menu');
 listmenu.messages = {"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."}};

Get the messages property. 

 const listmenu = document.querySelector('smart-list-menu');
 let messages = listmenu.messages;

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"

Example

Set the minimizeIconTemplate property. 

 <smart-list-menu minimize-icon-template='template1'></smart-list-menu>

Set the minimizeIconTemplate property by using the HTML Element's instance. 

 const listmenu = document.querySelector('smart-list-menu');
 listmenu.minimizeIconTemplate = 'template2';

Get the minimizeIconTemplate property. 

 const listmenu = document.querySelector('smart-list-menu');
 let minimizeIconTemplate = listmenu.minimizeIconTemplate;

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.

Example

Set the minimizeWidth property. 

 <smart-list-menu minimize-width='100'></smart-list-menu>

Set the minimizeWidth property by using the HTML Element's instance. 

 const listmenu = document.querySelector('smart-list-menu');
 listmenu.minimizeWidth = 200;

Get the minimizeWidth property. 

 const listmenu = document.querySelector('smart-list-menu');
 let minimizeWidth = listmenu.minimizeWidth;

overflow"auto" | "hidden" | "scroll"

Sets or gets the ListMenu's scroll buttons behavior.

Allowed Values

  • "auto" - The scroll buttons are automatically shown/hidden depending on the visibility of the items. If there's an item that is not visible the appropriate scroll button will appear in order to fully scroll to it.
  • "hidden" - The scroll buttons are hidden.
  • "scroll" - The scroll buttons are always visible.

Default value

"auto"

Example

Set the overflow property. 

 <smart-list-menu overflow='hidden'></smart-list-menu>

Set the overflow property by using the HTML Element's instance. 

 const listmenu = document.querySelector('smart-list-menu');
 listmenu.overflow = 'scroll';

Get the overflow property. 

 const listmenu = document.querySelector('smart-list-menu');
 let overflow = listmenu.overflow;

readonlyboolean

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

Default value

false

Example

Set the readonly property. 

 <smart-list-menu readonly></smart-list-menu>

Set the readonly property by using the HTML Element's instance. 

 const listmenu = document.querySelector('smart-list-menu');
 listmenu.readonly = true;

Get the readonly property. 

 const listmenu = document.querySelector('smart-list-menu');
 let readonly = listmenu.readonly;

rightToLeftboolean

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

Default value

false
Try a demo showcasing the rightToLeft property.

Example

Set the rightToLeft property. 

 <smart-list-menu right-to-left></smart-list-menu>

Set the rightToLeft property by using the HTML Element's instance. 

 const listmenu = document.querySelector('smart-list-menu');
 listmenu.rightToLeft = false;

Get the rightToLeft property. 

 const listmenu = document.querySelector('smart-list-menu');
 let rightToLeft = listmenu.rightToLeft;

scrollMode"scrollbar" | "scrollButtons"

Determines whether to use scrollbar or scrollButtons when content overflows an element's box.

Allowed Values

  • "scrollbar" - displays scrollbar
  • "scrollButtons" - displays scroll buttons

Default value

"scrollbar"
Try a demo showcasing the scrollMode property.

Example

Set the scrollMode property. 

 <smart-list-menu scroll-mode='scrollButtons'></smart-list-menu>

Set the scrollMode property by using the HTML Element's instance. 

 const listmenu = document.querySelector('smart-list-menu');
 listmenu.scrollMode = 'scrollbar';

Get the scrollMode property. 

 const listmenu = document.querySelector('smart-list-menu');
 let scrollMode = listmenu.scrollMode;

themestring

Determines the theme. Theme defines the look of the element

Default value

""

Example

Set the theme property. 

 <smart-list-menu theme='blue'></smart-list-menu>

Set the theme property by using the HTML Element's instance. 

 const listmenu = document.querySelector('smart-list-menu');
 listmenu.theme = 'red';

Get the theme property. 

 const listmenu = document.querySelector('smart-list-menu');
 let theme = listmenu.theme;

unfocusableboolean

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

Default value

false

Example

Set the unfocusable property. 

 <smart-list-menu unfocusable></smart-list-menu>

Set the unfocusable property by using the HTML Element's instance. 

 const listmenu = document.querySelector('smart-list-menu');
 listmenu.unfocusable = false;

Get the unfocusable property. 

 const listmenu = document.querySelector('smart-list-menu');
 let unfocusable = listmenu.unfocusable;

valueMemberstring

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

Default value

"value"

Example

Set the valueMember property. 

 <smart-list-menu value-member='info'></smart-list-menu>

Set the valueMember property by using the HTML Element's instance. 

 const listmenu = document.querySelector('smart-list-menu');
 listmenu.valueMember = 'details';

Get the valueMember property. 

 const listmenu = document.querySelector('smart-list-menu');
 let valueMember = listmenu.valueMember;

Events

expandCustomEvent

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

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onExpand

Arguments

evCustomEvent
ev.detailObject
ev.detail.item - The menu item that was expanded.
ev.detail.label - The label of the item that was expanded.
ev.detail.value - The value of the item that was expanded.
ev.detail.path - The path of the item that was expanded, e.g. '0.1', '1.1.2'.
ev.detail.children - The children of the item that was expanded.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Try a demo showcasing the expand event.

Example

Set up the event handler of expand event. 

const listmenu = document.querySelector('smart-list-menu');
listmenu.addEventListener('expand', function (event) {
    const detail = event.detail,
        item = detail.item,
        label = detail.label,
        value = detail.value,
        path = detail.path,
        children = detail.children;

	// event handling code goes here.
})

itemCheckChangeCustomEvent

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

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onItemCheckChange

Arguments

evCustomEvent
ev.detailObject
ev.detail.item - The menu item which state was changed.
ev.detail.label - The label of the item which state was changed.
ev.detail.value - The value of the item which state was changed.
ev.detail.checked - The checked state of the toggled item. If false the item is not toggled.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of itemCheckChange event. 

const listmenu = document.querySelector('smart-list-menu');
listmenu.addEventListener('itemCheckChange', function (event) {
    const detail = event.detail,
        item = detail.item,
        label = detail.label,
        value = detail.value,
        checked = detail.checked;

	// event handling code goes here.
})

itemClickCustomEvent

This event is triggered when a list menu item is clicked.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onItemClick

Arguments

evCustomEvent
ev.detailObject
ev.detail.item - The menu item that was clicked.
ev.detail.label - The label of the clicked item.
ev.detail.value - The value of the clicked item.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Try a demo showcasing the itemClick event.

Example

Set up the event handler of itemClick event. 

const listmenu = document.querySelector('smart-list-menu');
listmenu.addEventListener('itemClick', function (event) {
    const detail = event.detail,
        item = detail.item,
        label = detail.label,
        value = detail.value;

	// event handling code goes here.
})

scrollBottomReachedCustomEvent

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

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onScrollBottomReached

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of scrollBottomReached event. 

const listmenu = document.querySelector('smart-list-menu');
listmenu.addEventListener('scrollBottomReached', function (event) {
	// event handling code goes here.
})

swipeleftCustomEvent

This event is triggered when the user swipes to the left inside the ListMenu.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onSwipeleft

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of swipeleft event. 

const listmenu = document.querySelector('smart-list-menu');
listmenu.addEventListener('swipeleft', function (event) {
	// event handling code goes here.
})

swiperightCustomEvent

This event is triggered when the user swipes to the right inside the ListMenu.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onSwiperight

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of swiperight event. 

const listmenu = document.querySelector('smart-list-menu');
listmenu.addEventListener('swiperight', function (event) {
	// event handling code goes here.
})

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.


Invoke the addItem method.

const listmenu = document.querySelector('smart-list-menu');
listmenu.addItem("document.createElement('smart-menu-item')","0");

Try a demo showcasing the addItem method.

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


Invoke the back method.

const listmenu = document.querySelector('smart-list-menu');
listmenu.back();

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).


Invoke the changePage method.

const listmenu = document.querySelector('smart-list-menu');
listmenu.changePage("0.0");

checkItem( item: HTMLElement | string): void

Checks an item.

Arguments

itemHTMLElement | string

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


Invoke the checkItem method.

const listmenu = document.querySelector('smart-list-menu');
listmenu.checkItem("0.0");

getItem( id: string): HTMLElement

Gets an item by its id or numeric path.

Arguments

idstring

The id or numeric path of an item

ReturnsHTMLElement

Invoke the getItem method.

const listmenu = document.querySelector('smart-list-menu');
const result = listmenu.getItem("0.0");

maximize(): void

Maximizes the List Menu.


Invoke the maximize method.

const listmenu = document.querySelector('smart-list-menu');
listmenu.maximize();

minimize(): void

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


Invoke the minimize method.

const listmenu = document.querySelector('smart-list-menu');
listmenu.minimize();

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.


Invoke the removeItem method.

const listmenu = document.querySelector('smart-list-menu');
listmenu.removeItem("0.0");

uncheckItem( item: HTMLElement | string): void

Unchecks an item.

Arguments

itemHTMLElement | string

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


Invoke the uncheckItem method.

const listmenu = document.querySelector('smart-list-menu');
listmenu.uncheckItem("0.0");

CSS Variables

--smart-list-menu-default-widthvar()

Default value

"var(--smart-box-width)"

smartListMenu default width

--smart-list-menu-default-heightvar()

Default value

"var(--smart-box-height)"

smartListMenu default height

--smart-list-menu-filter-input-vertical-offsetvar()

Default value

"5px"

Defines vertical offset of the ListMenu's filter input.

--smart-list-menu-filter-input-horizontal-offsetvar()

Default value

"5px"

Defines horizontal offset of the ListMenu's filter input.


ListItem

Defines a list item for ListBox, ComboBox, DropDownList.

Selector

smart-list-item

Properties

AalternationIndexalternationIndex
Ccolorcolor
DdisplayModedisplayMode
Ggroupedgrouped
Sselectedselected
Vvaluevalue
Llabellabel
Ddetailsdetails
Ggroupgroup
Hhiddenhidden
Rreadonlyreadonly

Properties

alternationIndexnumber

Default value

-1

colorstring

Default value

""

displayMode"plain" | "checkBox" | "radioButton"

Default value

"plain"

groupedboolean

Default value

false
 <smart-list-item grouped></smart-list-item>

selectedboolean

Default value

false
 <smart-list-item selected></smart-list-item>

valuestring

Default value

""

labelstring

Default value

""

detailsstring

Default value

""

groupstring

Default value

""

hiddenboolean

Default value

false
 <smart-list-item hidden></smart-list-item>

readonlyboolean

Default value

false
 <smart-list-item readonly></smart-list-item>


ListItemsGroup

Defines a group of list items.

Selector

smart-list-items-group

Properties

Llabellabel

Properties

labelstring

Default value

""