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

Possible values:

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

Code examples

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;

If set to true, on mouseenter, smartListMenu receives focus automatically.

Code examples

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;

Allows top-level ListMenu items to be checkable. Other levels are controlled by setting checkable to the respective smart-menu-items-group.

Code examples

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;

Allows checkboxes in the ListMenu.

Code examples

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;

Sets the check mode of top-level ListMenu items. The behavior of checking could be as checkboxes or radio buttons. Other levels are controlled by setting checkMode to the respective smart-menu-items-group.

Possible values:

• 'checkbox'
• 'radioButton'

Code examples

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;

Determines the data source that will be loaded to the ListMenu.

Code examples

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;

Enables or disables smartListMenu.

Code examples

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;

Displays or hides the loading indicator

Code examples

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;

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

Code examples

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;

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.

Code examples

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;

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.

Code examples

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;

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

Possible values:

• 'top-left'
• 'top-right'
• 'bottom-left'
• 'bottom-right'
• 'auto'

Code examples

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;

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

Code examples

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;

Determines whether the Filtering is enabled.

Code examples

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;

Determines the placeholder for the filter input field.

Code examples

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;

Determines the filtering mode.

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

Code examples

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;

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

Code examples

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;

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

Code examples

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;

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.

Code examples

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;

The position of the loading indicator.

Possible values:

• 'bottom'
• 'center'
• 'top'

Code examples

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;

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

Code examples

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;

Callback, related to localization module.

Code examples

Set the localizeFormatFunction property.

 <smart-list-menu localize-format-function='function(){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(){return '...'};

Get the localizeFormatFunction property.

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

 let localizeFormatFunction = listMenu.localizeFormatFunction;

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

Code examples

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;

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

Code examples

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;

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.

Code examples

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;

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

Possible values:

• 'auto'
• 'hidden'
• 'scroll'

Code examples

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;

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

Code examples

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;

Determines the theme. Theme defines the look of the element

Code examples

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;

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

Code examples

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;

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

Code examples

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;

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

Code examples

Bind to the expand event by type: smartListMenu

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

 listMenu.addEventListener('expand', function (event) {
     // event handling code goes here.
 }
 

This event is triggered when a list menu item (smart-menu-item) is clicked.

Code examples

Bind to the itemClick event by type: smartListMenu

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

 listMenu.addEventListener('itemClick', function (event) {
     // event handling code goes here.
 }
 

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

Code examples

Bind to the scrollBottomReached event by type: smartListMenu

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

 listMenu.addEventListener('scrollBottomReached', function (event) {
     // event handling code goes here.
 }
 

Adds an item.

Code examples

Invoke the addItem method.

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

 listMenu.addItem(document.createElement('smart-menu-item'), 0); 

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

Code examples

Invoke the back method.

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

 listMenu.back(); 

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

Code examples

Invoke the changePage method.

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

 listMenu.changePage('0.0'); 

Checks an item.

Code examples

Invoke the checkItem method.

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

 listMenu.checkItem(0.0); 

Gets an item by its id or numeric path.

Code examples

Invoke the getItem method.

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

 listMenu.getItem('0.0'); 

Maximizes the List Menu.

Code examples

Invoke the maximize method.

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

 listMenu.maximize(); 

Minimizes the List Menu.

Code examples

Invoke the minimize method.

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

 listMenu.minimize(); 

Removes an item.

Code examples

Invoke the removeItem method.

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

 listMenu.removeItem(0.0); 

Unchecks an item.

Code examples

Invoke the uncheckItem method.

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

 listMenu.uncheckItem(0.0);