DropDownList JAVASCRIPT UI Component API

DropDownList Javascript API

Class

DropDownList

The DropDownList is a form component that lets you choose a single predefined value from a list. It is a more advanced version of the 'select' tag.

Selector

smart-drop-down-list

Properties

Events

Methods

Properties

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

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

Default value

"advanced"

Example

Set the animation property.

 <smart-drop-down-list animation='none'></smart-drop-down-list>

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

 const dropdownlist = document.querySelector('smart-drop-down-list');
 dropdownlist.animation = 'simple';

Get the animation property.

 const dropdownlist = document.querySelector('smart-drop-down-list');
 let animation = dropdownlist.animation;

autoCloseDelaynumber

Used only when dropDownOpenMode is set to 'auto'. Determines the delay before the opened drop down closes if the pointer is not over the element.

Default value

100

Example

Set the autoCloseDelay property.

 <smart-drop-down-list auto-close-delay='50'></smart-drop-down-list>

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

 const dropdownlist = document.querySelector('smart-drop-down-list');
 dropdownlist.autoCloseDelay = 200;

Get the autoCloseDelay property.

 const dropdownlist = document.querySelector('smart-drop-down-list');
 let autoCloseDelay = dropdownlist.autoCloseDelay;

dataSourceany

Determines the data source that will be loaded to the DropDownList. The dataSource can be an array of strings/numbers or objects where the attributes represent the properties of a List Item. For example label, value, group. It can also be a callback that returns an Array of items as previously described.

Example

Set the dataSource property.

 <smart-drop-down-list data-source='["item 1", "item 2"]'></smart-drop-down-list>

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

 const dropdownlist = document.querySelector('smart-drop-down-list');
 dropdownlist.dataSource = ["new item 1", "new item 2"];

Get the dataSource property.

 const dropdownlist = document.querySelector('smart-drop-down-list');
 let dataSource = dropdownlist.dataSource;

disabledboolean

Enables or disables the element.

Default value

false

Example

Set the disabled property.

 <smart-drop-down-list disabled></smart-drop-down-list>

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

 const dropdownlist = document.querySelector('smart-drop-down-list');
 dropdownlist.disabled = false;

Get the disabled property.

 const dropdownlist = document.querySelector('smart-drop-down-list');
 let disabled = dropdownlist.disabled;

displayLoadingIndicatorboolean

Determines whether an indicator will appear during filtering and remote item loading.

Default value

false

Example

Set the displayLoadingIndicator property.

 <smart-drop-down-list display-loading-indicator></smart-drop-down-list>

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

 const dropdownlist = document.querySelector('smart-drop-down-list');
 dropdownlist.displayLoadingIndicator = false;

Get the displayLoadingIndicator property.

 const dropdownlist = document.querySelector('smart-drop-down-list');
 let displayLoadingIndicator = dropdownlist.displayLoadingIndicator;

displayMemberstring

Sets or gets the displayMember. The displayMember specifies the name of an object property to display. The name is contained in the collection specified by the 'dataSource' property.

Default value

""""

Example

Set the displayMember property.

 <smart-drop-down-list display-member='label'></smart-drop-down-list>

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

 const dropdownlist = document.querySelector('smart-drop-down-list');
 dropdownlist.displayMember = 'name';

Get the displayMember property.

 const dropdownlist = document.querySelector('smart-drop-down-list');
 let displayMember = dropdownlist.displayMember;

dropDownAppendToany

Determines the drop down parent. The drop down can be removed from the body of the element and continue to work in another container. This is usefull when one of the parents of the element doesn't allow overflowing, by settings this property to 'body' the drop down will be appended to the DOM and the popup will open/close as usual. dropDownAppendTo can be a string representing the id of an HTML element on the page or a direct reference to that element. Reseting it back to null will take the drop down back to it's original place.

Example

Set the dropDownAppendTo property.

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

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

 const dropdownlist = document.querySelector('smart-drop-down-list');
 dropdownlist.dropDownAppendTo = null;

Get the dropDownAppendTo property.

 const dropdownlist = document.querySelector('smart-drop-down-list');
 let dropDownAppendTo = dropdownlist.dropDownAppendTo;

dropDownButtonPosition"left" | "right" | "top" | "bottom"

Determines the position of the drop down button.

Default value

"right"

Example

Set the dropDownButtonPosition property.

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

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

 const dropdownlist = document.querySelector('smart-drop-down-list');
 dropdownlist.dropDownButtonPosition = 'bottom';

Get the dropDownButtonPosition property.

 const dropdownlist = document.querySelector('smart-drop-down-list');
 let dropDownButtonPosition = dropdownlist.dropDownButtonPosition;

dropDownHeightstring | number

Sets the height of the drop down. By default it's set to an empty string. In this case the height of the drop down is controlled by a CSS variable.

Default value

""

Example

Set the dropDownHeight property.

 <smart-drop-down-list drop-down-height='300'></smart-drop-down-list>

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

 const dropdownlist = document.querySelector('smart-drop-down-list');
 dropdownlist.dropDownHeight = 500;

Get the dropDownHeight property.

 const dropdownlist = document.querySelector('smart-drop-down-list');
 let dropDownHeight = dropdownlist.dropDownHeight;

dropDownMaxHeightstring | number

Sets the maximum Height of the drop down. By default it's set to an empty string. In this case the maxHeight of the drop down is controlled by a CSS variable.

Default value

""

Example

Set the dropDownMaxHeight property.

 <smart-drop-down-list drop-down-max-height='800'></smart-drop-down-list>

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

 const dropdownlist = document.querySelector('smart-drop-down-list');
 dropdownlist.dropDownMaxHeight = 1000;

Get the dropDownMaxHeight property.

 const dropdownlist = document.querySelector('smart-drop-down-list');
 let dropDownMaxHeight = dropdownlist.dropDownMaxHeight;

dropDownMaxWidthstring | number

Sets the maximum Width of the drop down. By default it's set to an empty string. In this case the maxWidth of the drop down is controlled by a CSS variable.

Default value

""

Example

Set the dropDownMaxWidth property.

 <smart-drop-down-list drop-down-max-width='500'></smart-drop-down-list>

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

 const dropdownlist = document.querySelector('smart-drop-down-list');
 dropdownlist.dropDownMaxWidth = 800;

Get the dropDownMaxWidth property.

 const dropdownlist = document.querySelector('smart-drop-down-list');
 let dropDownMaxWidth = dropdownlist.dropDownMaxWidth;

dropDownMinHeightstring | number

Sets the minimum Height of the drop down. By default it's set to an empty string. In this case the minHeight of the drop down is controlled by a CSS variable.

Default value

""

Example

Set the dropDownMinHeight property.

 <smart-drop-down-list drop-down-min-height='50'></smart-drop-down-list>

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

 const dropdownlist = document.querySelector('smart-drop-down-list');
 dropdownlist.dropDownMinHeight = 150;

Get the dropDownMinHeight property.

 const dropdownlist = document.querySelector('smart-drop-down-list');
 let dropDownMinHeight = dropdownlist.dropDownMinHeight;

dropDownMinWidthstring | number

Sets the minimum Width of the drop down. By default it's set to an empty string. In this case the minWidth of the drop down is controlled by a CSS variable.

Default value

""

Example

Set the dropDownMinWidth property.

 <smart-drop-down-list drop-down-min-width='100'></smart-drop-down-list>

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

 const dropdownlist = document.querySelector('smart-drop-down-list');
 dropdownlist.dropDownMinWidth = 90;

Get the dropDownMinWidth property.

 const dropdownlist = document.querySelector('smart-drop-down-list');
 let dropDownMinWidth = dropdownlist.dropDownMinWidth;

dropDownOpenMode"none" | "default" | "dropDownButton" | "auto"

Determines how the drop down is going to open.

Default value

"default"

Example

Set the dropDownOpenMode property.

 <smart-drop-down-list drop-down-open-mode='dropDownButton'></smart-drop-down-list>

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

 const dropdownlist = document.querySelector('smart-drop-down-list');
 dropdownlist.dropDownOpenMode = 'auto';

Get the dropDownOpenMode property.

 const dropdownlist = document.querySelector('smart-drop-down-list');
 let dropDownOpenMode = dropdownlist.dropDownOpenMode;

dropDownOverlayboolean

If this property is enabled, when the element's dropdown is opened, a transparent overlay is positioned between the dropdown and the rest of the document. The purpose of the overlay is to make sure that clicking anywhere outside the popup will will target the overlay and not the DOM.

Default value

false

Example

Set the dropDownOverlay property.

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

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

 const dropdownlist = document.querySelector('smart-drop-down-list');
 dropdownlist.dropDownOverlay = false;

Get the dropDownOverlay property.

 const dropdownlist = document.querySelector('smart-drop-down-list');
 let dropDownOverlay = dropdownlist.dropDownOverlay;

dropDownPlaceholderstring

Determines the placeholder for the drop down list when it's empty.

Default value

"No Items"

Example

Set the dropDownPlaceholder property.

 <smart-drop-down-list drop-down-placeholder='Empty'></smart-drop-down-list>

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

 const dropdownlist = document.querySelector('smart-drop-down-list');
 dropdownlist.dropDownPlaceholder = 'Empty drop down';

Get the dropDownPlaceholder property.

 const dropdownlist = document.querySelector('smart-drop-down-list');
 let dropDownPlaceholder = dropdownlist.dropDownPlaceholder;

dropDownPosition"auto" | "top" | "bottom" | "overlay-top" | "overlay-center" | "overlay-bottom" | "center-bottom" | "center-top"

Determines the position of the drop down when opened.

Default value

"auto"

Example

Set the dropDownPosition property.

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

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

 const dropdownlist = document.querySelector('smart-drop-down-list');
 dropdownlist.dropDownPosition = 'bottom';

Get the dropDownPosition property.

 const dropdownlist = document.querySelector('smart-drop-down-list');
 let dropDownPosition = dropdownlist.dropDownPosition;

dropDownWidthstring | number

Sets the width of the drop down. By default it's set to an empty string. In this case the width of the drop down is controlled by a CSS variable.

Default value

""

Example

Set the dropDownWidth property.

 <smart-drop-down-list drop-down-width='300'></smart-drop-down-list>

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

 const dropdownlist = document.querySelector('smart-drop-down-list');
 dropdownlist.dropDownWidth = 500;

Get the dropDownWidth property.

 const dropdownlist = document.querySelector('smart-drop-down-list');
 let dropDownWidth = dropdownlist.dropDownWidth;

filterableboolean

Determines whether filtering is enabled.

Default value

false

Example

Set the filterable property.

 <smart-drop-down-list filterable></smart-drop-down-list>

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

 const dropdownlist = document.querySelector('smart-drop-down-list');
 dropdownlist.filterable = false;

Get the filterable property.

 const dropdownlist = document.querySelector('smart-drop-down-list');
 let filterable = dropdownlist.filterable;

filterInputPlaceholderstring

Determines the placeholder for the filter input inside the drop down that is only visible when filterable is enabled.

Default value

""

Example

Set the filterInputPlaceholder property.

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

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

 const dropdownlist = document.querySelector('smart-drop-down-list');
 dropdownlist.filterInputPlaceholder = 'Awaiting entry:';

Get the filterInputPlaceholder property.

 const dropdownlist = document.querySelector('smart-drop-down-list');
 let filterInputPlaceholder = dropdownlist.filterInputPlaceholder;

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

Determines the filtering mode of the drop down list.

Default value

"startsWithIgnoreCase"

Example

Set the filterMode property.

 <smart-drop-down-list filter-mode='contains'></smart-drop-down-list>

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

 const dropdownlist = document.querySelector('smart-drop-down-list');
 dropdownlist.filterMode = 'equals';

Get the filterMode property.

 const dropdownlist = document.querySelector('smart-drop-down-list');
 let filterMode = dropdownlist.filterMode;

groupedboolean

If enabled, the items will be grouped by their first letter. Can't be applied if the dataSource already contains groups.

Default value

false

Example

Set the grouped property.

 <smart-drop-down-list grouped></smart-drop-down-list>

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

 const dropdownlist = document.querySelector('smart-drop-down-list');
 dropdownlist.grouped = false;

Get the grouped property.

 const dropdownlist = document.querySelector('smart-drop-down-list');
 let grouped = dropdownlist.grouped;

groupMemberstring | null

Determines which attribute from the dataSource object will be used as the group member for the items. If not set, by default 'group' property is used from the source object. groupMember is especially usefull when loading the data from a JSON file as a dataSource for the ListBox and there's a specific property that should be used to group the items.

Example

Set the groupMember property.

 <smart-drop-down-list group-member='group'></smart-drop-down-list>

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

 const dropdownlist = document.querySelector('smart-drop-down-list');
 dropdownlist.groupMember = section;

Get the groupMember property.

 const dropdownlist = document.querySelector('smart-drop-down-list');
 let groupMember = dropdownlist.groupMember;

hintstring

Sets additional helper text below the element. The hint is visible only when the element is focused.

Default value

""

Example

Set the hint property.

 <smart-drop-down-list hint='Helper text'></smart-drop-down-list>

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

 const dropdownlist = document.querySelector('smart-drop-down-list');
 dropdownlist.hint = 'Hint';

Get the hint property.

 const dropdownlist = document.querySelector('smart-drop-down-list');
 let hint = dropdownlist.hint;

horizontalScrollBarVisibility"auto" | "disabled" | "hidden" | "visible"

Determines the visibility of the horizontal Scroll bar inside the drop down.

Default value

"auto"

Example

Set the horizontalScrollBarVisibility property.

 <smart-drop-down-list horizontal-scroll-bar-visibility='disabled'></smart-drop-down-list>

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

 const dropdownlist = document.querySelector('smart-drop-down-list');
 dropdownlist.horizontalScrollBarVisibility = 'hidden';

Get the horizontalScrollBarVisibility property.

 const dropdownlist = document.querySelector('smart-drop-down-list');
 let horizontalScrollBarVisibility = dropdownlist.horizontalScrollBarVisibility;

inputMemberstring

Represents the property name of a List item. Determines the value of the input when a ListItem is selected. Usefull in cases where the user wants to display for example the value of an item instead of it's label. By default the label is displayed in the input.

Default value

""

Example

Set the inputMember property.

 <smart-drop-down-list input-member='label'></smart-drop-down-list>

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

 const dropdownlist = document.querySelector('smart-drop-down-list');
 dropdownlist.inputMember = 'value';

Get the inputMember property.

 const dropdownlist = document.querySelector('smart-drop-down-list');
 let inputMember = dropdownlist.inputMember;

incrementalSearchDelaynumber

IncrementalSearchDelay property specifies the time-interval in milliseconds until the previous search query is cleared. The timer starts when the user stops typing. A new query can be started only when the delay has passed.

Default value

700

Example

Set the incrementalSearchDelay property.

 <smart-drop-down-list incremental-search-delay='100'></smart-drop-down-list>

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

 const dropdownlist = document.querySelector('smart-drop-down-list');
 dropdownlist.incrementalSearchDelay = 500;

Get the incrementalSearchDelay property.

 const dropdownlist = document.querySelector('smart-drop-down-list');
 let incrementalSearchDelay = dropdownlist.incrementalSearchDelay;

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

Sets ot gets the mode of the incremental search mode. Incremental search is enabled by default. Typing while the drop down is focused starts the incremental search.

Default value

"startsWithIgnoreCase"

Example

Set the incrementalSearchMode property.

 <smart-drop-down-list incremental-search-mode='contains'></smart-drop-down-list>

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

 const dropdownlist = document.querySelector('smart-drop-down-list');
 dropdownlist.incrementalSearchMode = 'endsWith';

Get the incrementalSearchMode property.

 const dropdownlist = document.querySelector('smart-drop-down-list');
 let incrementalSearchMode = dropdownlist.incrementalSearchMode;

itemHeightnumber | null

Sets the height for all list items. Used only when virtualization is enabled.

Example

Set the itemHeight property.

 <smart-drop-down-list item-height='20'></smart-drop-down-list>

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

 const dropdownlist = document.querySelector('smart-drop-down-list');
 dropdownlist.itemHeight = 50;

Get the itemHeight property.

 const dropdownlist = document.querySelector('smart-drop-down-list');
 let itemHeight = dropdownlist.itemHeight;

itemMeasureMode"auto" | "precise"

Determines the item width measuring algorithm.

Default value

"auto"

Example

Set the itemMeasureMode property.

 <smart-drop-down-list item-measure-mode='precise'></smart-drop-down-list>

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

 const dropdownlist = document.querySelector('smart-drop-down-list');
 dropdownlist.itemMeasureMode = 'auto';

Get the itemMeasureMode property.

 const dropdownlist = document.querySelector('smart-drop-down-list');
 let itemMeasureMode = dropdownlist.itemMeasureMode;

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

A getter that returns an array of all List items inside the drop down.

Default value

""

itemTemplateany

The itemTemplate property is a string that represents the id of an HTMLTemplateElement in the DOM or it's direct reference. It's used to set a customize the content of the list items.

Example

Set the itemTemplate property.

 <smart-drop-down-list item-template=''templateA''></smart-drop-down-list>

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

 const dropdownlist = document.querySelector('smart-drop-down-list');
 dropdownlist.itemTemplate = 'templateB';

Get the itemTemplate property.

 const dropdownlist = document.querySelector('smart-drop-down-list');
 let itemTemplate = dropdownlist.itemTemplate;

labelstring

Sets a little text label above the element.

Default value

""

Example

Set the label property.

 <smart-drop-down-list label='Helper text'></smart-drop-down-list>

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

 const dropdownlist = document.querySelector('smart-drop-down-list');
 dropdownlist.label = 'Label';

Get the label property.

 const dropdownlist = document.querySelector('smart-drop-down-list');
 let label = dropdownlist.label;

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-drop-down-list loading-indicator-placeholder='Incoming data'></smart-drop-down-list>

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

 const dropdownlist = document.querySelector('smart-drop-down-list');
 dropdownlist.loadingIndicatorPlaceholder = 'LOADING...';

Get the loadingIndicatorPlaceholder property.

 const dropdownlist = document.querySelector('smart-drop-down-list');
 let loadingIndicatorPlaceholder = dropdownlist.loadingIndicatorPlaceholder;

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

Determines the position of the loading indicator.

Default value

"center"

Example

Set the loadingIndicatorPosition property.

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

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

 const dropdownlist = document.querySelector('smart-drop-down-list');
 dropdownlist.loadingIndicatorPosition = 'top';

Get the loadingIndicatorPosition property.

 const dropdownlist = document.querySelector('smart-drop-down-list');
 let loadingIndicatorPosition = dropdownlist.loadingIndicatorPosition;

localestring

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

Default value

"en"

Example

Set the locale property.

 <smart-drop-down-list locale='de'></smart-drop-down-list>

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

 const dropdownlist = document.querySelector('smart-drop-down-list');
 dropdownlist.locale = 'en';

Get the locale property.

 const dropdownlist = document.querySelector('smart-drop-down-list');
 let locale = dropdownlist.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-drop-down-list localize-format-function='function(defaultMessage, message, messageArguments){return '...'}'></smart-drop-down-list>

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

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

Get the localizeFormatFunction property.

 const dropdownlist = document.querySelector('smart-drop-down-list');
 let localizeFormatFunction = dropdownlist.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.",

"invalidNode": "{{elementType}}: Invalid parameter '{{node}}' when calling {{method}}."

}

Example

Set the messages property.

 <smart-drop-down-list 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.","invalidNode":"{{elementType}}: Ungultiger Parameter '{{node}}' beim Aufruf von {{method}}."}}'></smart-drop-down-list>

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

 const dropdownlist = document.querySelector('smart-drop-down-list');
 dropdownlist.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.","invalidNode":"{{elementType}}: Invalid parameter '{{node}}' when calling {{method}}."}};

Get the messages property.

 const dropdownlist = document.querySelector('smart-drop-down-list');
 let messages = dropdownlist.messages;

namestring

Sets or gets the name attribute for the element. Name is used when submiting HTML forms.

Default value

""

Example

Set the name property.

 <smart-drop-down-list name='dropdown'></smart-drop-down-list>

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

 const dropdownlist = document.querySelector('smart-drop-down-list');
 dropdownlist.name = 'dropDown2';

Get the name property.

 const dropdownlist = document.querySelector('smart-drop-down-list');
 let name = dropdownlist.name;

openedboolean

Determines whether the popup is opened or not.

Default value

false

Example

Set the opened property.

 <smart-drop-down-list opened></smart-drop-down-list>

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

 const dropdownlist = document.querySelector('smart-drop-down-list');
 dropdownlist.opened = false;

Get the opened property.

 const dropdownlist = document.querySelector('smart-drop-down-list');
 let opened = dropdownlist.opened;

placeholderstring

Determines the element's placeholder, displayed in the element's selection field.

Default value

""

Example

Set the placeholder property.

 <smart-drop-down-list placeholder='Choose:'></smart-drop-down-list>

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

 const dropdownlist = document.querySelector('smart-drop-down-list');
 dropdownlist.placeholder = 'Submit';

Get the placeholder property.

 const dropdownlist = document.querySelector('smart-drop-down-list');
 let placeholder = dropdownlist.placeholder;

readonlyboolean

Disables user interaction with the element.

Default value

false

Example

Set the readonly property.

 <smart-drop-down-list readonly></smart-drop-down-list>

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

 const dropdownlist = document.querySelector('smart-drop-down-list');
 dropdownlist.readonly = false;

Get the readonly property.

 const dropdownlist = document.querySelector('smart-drop-down-list');
 let readonly = dropdownlist.readonly;

rightToLeftboolean

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

Default value

false

Example

Set the rightToLeft property.

 <smart-drop-down-list right-to-left></smart-drop-down-list>

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

 const dropdownlist = document.querySelector('smart-drop-down-list');
 dropdownlist.rightToLeft = false;

Get the rightToLeft property.

 const dropdownlist = document.querySelector('smart-drop-down-list');
 let rightToLeft = dropdownlist.rightToLeft;

resizeIndicatorboolean

Determines whether the resize indicator in the bottom right corner of the drop down is visible or not. This property is used in conjunction with resizeMode.

Default value

false

Example

Set the resizeIndicator property.

 <smart-drop-down-list resize-indicator></smart-drop-down-list>

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

 const dropdownlist = document.querySelector('smart-drop-down-list');
 dropdownlist.resizeIndicator = false;

Get the resizeIndicator property.

 const dropdownlist = document.querySelector('smart-drop-down-list');
 let resizeIndicator = dropdownlist.resizeIndicator;

resizeMode"none" | "horizontal" | "vertical" | "both"

Determines whether the dropDown can be resized or not. When resizing is enabled, a resize bar appears on the top/bottom side of the drop down.

Default value

"none"

Example

Set the resizeMode property.

 <smart-drop-down-list resize-mode='horizontal'></smart-drop-down-list>

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

 const dropdownlist = document.querySelector('smart-drop-down-list');
 dropdownlist.resizeMode = 'vertical';

Get the resizeMode property.

 const dropdownlist = document.querySelector('smart-drop-down-list');
 let resizeMode = dropdownlist.resizeMode;

selectionDisplayMode"plain" | "placeholder" | "tokens"

Determines what will be displayed in the dropDown selection field.

Default value

"plain"

Example

Set the selectionDisplayMode property.

 <smart-drop-down-list selection-display-mode='placeholder'></smart-drop-down-list>

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

 const dropdownlist = document.querySelector('smart-drop-down-list');
 dropdownlist.selectionDisplayMode = 'default';

Get the selectionDisplayMode property.

 const dropdownlist = document.querySelector('smart-drop-down-list');
 let selectionDisplayMode = dropdownlist.selectionDisplayMode;

selectedIndexesnumber[]

Sets or gets the selected indexes. Selected indexes represents an array of the indexes of the items that should be selected.

Example

Set the selectedIndexes property.

 <smart-drop-down-list selected-indexes='[1,2,3]'></smart-drop-down-list>

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

 const dropdownlist = document.querySelector('smart-drop-down-list');
 dropdownlist.selectedIndexes = [4,5,6];

Get the selectedIndexes property.

 const dropdownlist = document.querySelector('smart-drop-down-list');
 let selectedIndexes = dropdownlist.selectedIndexes;

selectedValuesstring[]

Sets or gets elected indexes. Selected values represents the values of the items that should be selected.

Example

Set the selectedValues property.

 <smart-drop-down-list selected-values='["item 1"]'></smart-drop-down-list>

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

 const dropdownlist = document.querySelector('smart-drop-down-list');
 dropdownlist.selectedValues = ["item 2"];

Get the selectedValues property.

 const dropdownlist = document.querySelector('smart-drop-down-list');
 let selectedValues = dropdownlist.selectedValues;

selectionMode"none" | "oneOrManyExtended" | "zeroOrMany" | "oneOrMany" | "zeroOrOne" | "one" | "checkBox" | "radioButton"

Determines how many items can be selected.

Default value

"one"

Example

Set the selectionMode property.

 <smart-drop-down-list selection-mode='none'></smart-drop-down-list>

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

 const dropdownlist = document.querySelector('smart-drop-down-list');
 dropdownlist.selectionMode = 'oneOrManyExtended';

Get the selectionMode property.

 const dropdownlist = document.querySelector('smart-drop-down-list');
 let selectionMode = dropdownlist.selectionMode;

sortedboolean

Determines whether the items are sorted alphabetically or not

Default value

false

Example

Set the sorted property.

 <smart-drop-down-list sorted></smart-drop-down-list>

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

 const dropdownlist = document.querySelector('smart-drop-down-list');
 dropdownlist.sorted = false;

Get the sorted property.

 const dropdownlist = document.querySelector('smart-drop-down-list');
 let sorted = dropdownlist.sorted;

sortDirectionstring

Determines sorting direction - ascending(asc) or descending(desc)

Default value

"asc"

Example

Set the sortDirection property.

 <smart-drop-down-list sort-direction='desc'></smart-drop-down-list>

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

 const dropdownlist = document.querySelector('smart-drop-down-list');
 dropdownlist.sortDirection = 'asc';

Get the sortDirection property.

 const dropdownlist = document.querySelector('smart-drop-down-list');
 let sortDirection = dropdownlist.sortDirection;

themestring

Determines the theme for the element. Themes define the look of the elements.

Default value

""

Example

Set the theme property.

 <smart-drop-down-list theme='blue'></smart-drop-down-list>

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

 const dropdownlist = document.querySelector('smart-drop-down-list');
 dropdownlist.theme = 'red';

Get the theme property.

 const dropdownlist = document.querySelector('smart-drop-down-list');
 let theme = dropdownlist.theme;

tokenTemplateany

Sets a custom template for the content of the tokens when selectionDisplayMode is set to 'tokens'.

Example

Set the tokenTemplate property.

 <smart-drop-down-list token-template='tokenTemplate'></smart-drop-down-list>

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

 const dropdownlist = document.querySelector('smart-drop-down-list');
 dropdownlist.tokenTemplate = null;

Get the tokenTemplate property.

 const dropdownlist = document.querySelector('smart-drop-down-list');
 let tokenTemplate = dropdownlist.tokenTemplate;

unfocusableboolean

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

Default value

false

Example

Set the unfocusable property.

 <smart-drop-down-list unfocusable></smart-drop-down-list>

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

 const dropdownlist = document.querySelector('smart-drop-down-list');
 dropdownlist.unfocusable = false;

Get the unfocusable property.

 const dropdownlist = document.querySelector('smart-drop-down-list');
 let unfocusable = dropdownlist.unfocusable;

valueany

Sets or gets the value. Returns the selection. Return type: {label: string, value: any}[].

Example

Set the value property.

 <smart-drop-down-list value='1'></smart-drop-down-list>

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

 const dropdownlist = document.querySelector('smart-drop-down-list');
 dropdownlist.value = 2;

Get the value property.

 const dropdownlist = document.querySelector('smart-drop-down-list');
 let value = dropdownlist.value;

valueMemberstring

Determines the value member of an item. Stored as value in the item object. Similar to groupMember, valueMember is especially usefull when using data from a JSON file as a dataSource for the ListBox and there's a specific property that should be used for the value the items.

Default value

""""

Example

Set the valueMember property.

 <smart-drop-down-list value-member='value'></smart-drop-down-list>

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

 const dropdownlist = document.querySelector('smart-drop-down-list');
 dropdownlist.valueMember = 'newValue';

Get the valueMember property.

 const dropdownlist = document.querySelector('smart-drop-down-list');
 let valueMember = dropdownlist.valueMember;

verticalScrollBarVisibility"auto" | "disabled" | "hidden" | "visible"

Determines the visibility of the vertical scroll bar.

Default value

"auto"

Example

Set the verticalScrollBarVisibility property.

 <smart-drop-down-list vertical-scroll-bar-visibility='hidden'></smart-drop-down-list>

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

 const dropdownlist = document.querySelector('smart-drop-down-list');
 dropdownlist.verticalScrollBarVisibility = 'visible';

Get the verticalScrollBarVisibility property.

 const dropdownlist = document.querySelector('smart-drop-down-list');
 let verticalScrollBarVisibility = dropdownlist.verticalScrollBarVisibility;

virtualizedboolean

Determines weather or not Virtualization is used. Virtualization allows a huge amount of items to be loaded to the drop down while preserving the performance. For example a milion items can be loaded.

Default value

false

Example

Set the virtualized property.

 <smart-drop-down-list virtualized></smart-drop-down-list>

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

 const dropdownlist = document.querySelector('smart-drop-down-list');
 dropdownlist.virtualized = false;

Get the virtualized property.

 const dropdownlist = document.querySelector('smart-drop-down-list');
 let virtualized = dropdownlist.virtualized;

Events

actionButtonClickCustomEvent

This event is triggered when user clicks on the action button. The action button is only visible when dropDownOpenMode is set to 'dropDownbutton'.

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

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 actionButtonClick event.

const dropdownlist = document.querySelector('smart-drop-down-list');
dropdownlist.addEventListener('actionButtonClick', function (event) {
	// event handling code goes here.
})

changeCustomEvent

This event is triggered when the selection is changed.

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

Arguments

evCustomEvent
ev.detailObject
ev.detail.addedItems - An array of List items that have been selected.
ev.detail.disabled - A flag indicating whether or not the item that caused the change event is disabled.
ev.detail.index - The index of the List item that triggered the event.
ev.detail.label - The label of the List item that triggered the event.
ev.detail.removedItems - An array of List items that have been unselected before the event was fired.
ev.detail.selected - The selected state of the List item that triggered the event. If an item was selected the value will be true and vice versa.
ev.detail.value - The value of the List item that triggered the event.

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 change event.

const dropdownlist = document.querySelector('smart-drop-down-list');
dropdownlist.addEventListener('change', function (event) {
    const detail = event.detail,
        addedItems = detail.addedItems,
        disabled = detail.disabled,
        index = detail.index,
        label = detail.label,
        removedItems = detail.removedItems,
        selected = detail.selected,
        value = detail.value;

	// event handling code goes here.
})

closeCustomEvent

This event is triggered when the drop down list is closed.

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

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 close event.

const dropdownlist = document.querySelector('smart-drop-down-list');
dropdownlist.addEventListener('close', function (event) {
	// event handling code goes here.
})

closingCustomEvent

This event is triggered when the drop down list is about to be closed. This event allows to cancel the closing operation calling event.preventDefault() in the event handler function.

  • Bubbles Yes
  • Cancelable Yes
  • Interface CustomEvent
  • Event handler property onClosing

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 closing event.

const dropdownlist = document.querySelector('smart-drop-down-list');
dropdownlist.addEventListener('closing', function (event) {
	// event handling code goes here.
})

dropDownButtonClickCustomEvent

This event is triggered when user clicks on the drop down button.

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

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 dropDownButtonClick event.

const dropdownlist = document.querySelector('smart-drop-down-list');
dropdownlist.addEventListener('dropDownButtonClick', function (event) {
	// event handling code goes here.
})

itemClickCustomEvent

This event is triggered when an item is clicked.

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

Arguments

evCustomEvent
ev.detailObject
ev.detail.disabled - Indicates whether the List item that was clicked is disabled or not.
ev.detail.index - Indicates the index of the List item that was clicked.
ev.detail.label - The label of the List item that was clicked.
ev.detail.selected - Indicates whether the List item that was clicked is selected or not.
ev.detail.value - The value of the List item that was clicked.

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 itemClick event.

const dropdownlist = document.querySelector('smart-drop-down-list');
dropdownlist.addEventListener('itemClick', function (event) {
    const detail = event.detail,
        disabled = detail.disabled,
        index = detail.index,
        label = detail.label,
        selected = detail.selected,
        value = detail.value;

	// event handling code goes here.
})

openCustomEvent

This event is triggered when the drop down list is opened.

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

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 open event.

const dropdownlist = document.querySelector('smart-drop-down-list');
dropdownlist.addEventListener('open', function (event) {
	// event handling code goes here.
})

openingCustomEvent

This event is triggered when the drop down list is about to be opened. This event allows to cancel the opening operation calling event.preventDefault() in the event handler function.

  • Bubbles Yes
  • Cancelable Yes
  • Interface CustomEvent
  • Event handler property onOpening

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 opening event.

const dropdownlist = document.querySelector('smart-drop-down-list');
dropdownlist.addEventListener('opening', function (event) {
	// event handling code goes here.
})

resizeStartCustomEvent

This event is triggered when user starts resizing the drop down.

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

Arguments

evCustomEvent
ev.detailObject
ev.detail.position - An object containing the current left and top positions of the drop down.

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 resizeStart event.

const dropdownlist = document.querySelector('smart-drop-down-list');
dropdownlist.addEventListener('resizeStart', function (event) {
    const detail = event.detail,
        position = detail.position;

	// event handling code goes here.
})

resizeEndCustomEvent

This event is triggered when the resizing of the drop down is finished.

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

Arguments

evCustomEvent
ev.detailObject
ev.detail.position - An object containing the current left and top positions of the drop down.

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 resizeEnd event.

const dropdownlist = document.querySelector('smart-drop-down-list');
dropdownlist.addEventListener('resizeEnd', function (event) {
    const detail = event.detail,
        position = detail.position;

	// event handling code goes here.
})

scrollBottomReachedCustomEvent

This event is triggered when the user scrolls to the end of the dropDown list.

  • 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 dropdownlist = document.querySelector('smart-drop-down-list');
dropdownlist.addEventListener('scrollBottomReached', function (event) {
	// event handling code goes here.
})

scrollTopReachedCustomEvent

This event is triggered when the user scrolls to the start of the dropDown list.

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

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 scrollTopReached event.

const dropdownlist = document.querySelector('smart-drop-down-list');
dropdownlist.addEventListener('scrollTopReached', function (event) {
	// event handling code goes here.
})

Methods

appendChild( node: Node): T

Arguments

nodeNode

A ListItem element that should be added to the rest of the items as the last item.

ReturnsNode

clearItems(): void

Removes all items from the drop down list.


Invoke the clearItems method.

const dropdownlist = document.querySelector('smart-drop-down-list');
dropdownlist.clearItems();

clearSelection(): void

Unselects all items.


Invoke the clearSelection method.

const dropdownlist = document.querySelector('smart-drop-down-list');
dropdownlist.clearSelection();

close(): void

Closes the dropDown list.


Invoke the close method.

const dropdownlist = document.querySelector('smart-drop-down-list');
dropdownlist.close();

Try a demo showcasing the close method.

ensureVisible( item: HTMLElement | string): void

Ensures the desired item is visible by scrolling to it.

Arguments

itemHTMLElement | string

A list item or value of the desired item to be visible.


Invoke the ensureVisible method.

const dropdownlist = document.querySelector('smart-drop-down-list');
dropdownlist.ensureVisible("'item1'");

getItem( value: string): HTMLElement

Returns an item instance from the dropDown list.

Arguments

valuestring

The value of an item from the drop down list.

ReturnsHTMLElement

Invoke the getItem method.

const dropdownlist = document.querySelector('smart-drop-down-list');
const result = dropdownlist.getItem("First");

insert( position: number, value: any): void

Inserts a new item at a specified position.

Arguments

positionnumber

The position where the item must be inserted.

valueany

The value of the new item.


Invoke the insert method.

const dropdownlist = document.querySelector('smart-drop-down-list');
dropdownlist.insert(5,"'New item'");

Try a demo showcasing the insert method.

insertBefore( node: Node, referenceNode: Node | null): T

Arguments

nodeNode

A ListItem element that should be added before the referenceItem in the list.

referenceNodeNode | null

A ListItem element that acts as the reference item before which a new item is about to be inserted. The referenceNode must be in the same list as the node.

ReturnsNode

open(): void

Opens the dropDown list.


Invoke the open method.

const dropdownlist = document.querySelector('smart-drop-down-list');
dropdownlist.open();

Try a demo showcasing the open method.

removeAt( position: number): void

Removes an item at a specified position.

Arguments

positionnumber

The position of the removed item.


Invoke the removeAt method.

const dropdownlist = document.querySelector('smart-drop-down-list');
dropdownlist.removeAt(5);

Try a demo showcasing the removeAt method.

removeChild( node: Node): T

Arguments

nodeNode

A ListItem element that is part of the list of items inside the element.

ReturnsNode

select( item: string | HTMLElement): void

Selects an item from the dropDown list.

Arguments

itemstring | HTMLElement

A string, representing the value of the item or an HTML Element referencing an item from the list


Invoke the select method.

const dropdownlist = document.querySelector('smart-drop-down-list');
dropdownlist.select("'First Item'");

unselect( item: string | HTMLElement): void

Unselects an item from the dropDown list.

Arguments

itemstring | HTMLElement

A string, representing the value of the item or an HTML Element referencing an item from the list


Invoke the unselect method.

const dropdownlist = document.querySelector('smart-drop-down-list');
dropdownlist.unselect("'First Item'");

update( position: number, value: any): void

Updates an item from the dropDown list.

Arguments

positionnumber

The position where the item must be updated.

valueany

The value of the updated item.


Invoke the update method.

const dropdownlist = document.querySelector('smart-drop-down-list');
dropdownlist.update(5,"'Updated item'");

Try a demo showcasing the update method.

CSS Variables

--smart-drop-down-list-default-widthvar()

Default value

"var(--smart-editor-width)"

smartDropDownList, smartComboBox default width

--smart-drop-down-list-default-heightvar()

Default value

"var(--smart-editor-height)"

smartDropDownList, smartComboBox default height

--smart-drop-down-list-drop-down-widthvar()

Default value

"initial"

smartDropDownList drop down width

--smart-drop-down-list-drop-down-heightvar()

Default value

"auto"

smartDropDownList drop down height


ListItem

Defines a list item for ListBox, ComboBox, DropDownList.

Selector

smart-list-item

Properties

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

Properties

labelstring

Default value

""