ComboBox JAVASCRIPT UI Component API

ComboBox Javascript API

Class

ComboBox

ComboBox is the alternate for the HTML select tag with editable option. It supports data binding, auto-complete, filtering, grouping, cascading and more.

Selector

smart-combo-box

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-combo-box animation='none'></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.animation = 'simple';

Get the animation property.

 const combobox = document.querySelector('smart-combo-box');
 let animation = combobox.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-combo-box auto-close-delay='50'></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.autoCloseDelay = 200;

Get the autoCloseDelay property.

 const combobox = document.querySelector('smart-combo-box');
 let autoCloseDelay = combobox.autoCloseDelay;

autoComplete"none" | "auto" | "inline" | "manual"

Determines the autocomplete mode. Auto complete modes filter the items from the dataSource and show only those that match the input.

Default value

"none"

Example

Set the autoComplete property.

 <smart-combo-box auto-complete='auto'></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.autoComplete = 'manual';

Get the autoComplete property.

 const combobox = document.querySelector('smart-combo-box');
 let autoComplete = combobox.autoComplete;

autoCompleteDelaynumber

Determines the delay before the drop down opens to show the matches from the auto complete operation. The delay is measured in miliseconds.

Default value

100

Example

Set the autoCompleteDelay property.

 <smart-combo-box auto-complete-delay='250'></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.autoCompleteDelay = 500;

Get the autoCompleteDelay property.

 const combobox = document.querySelector('smart-combo-box');
 let autoCompleteDelay = combobox.autoCompleteDelay;

autoOpenShortcutKeystring[]

Allows the user to define a custom key name ( or multiple key names) to open that popup with.

Example

Set the autoOpenShortcutKey property.

 <smart-combo-box auto-open-shortcut-key='["ArrowUp", "ArrowDown"]'></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.autoOpenShortcutKey = ["ArrowDown"];

Get the autoOpenShortcutKey property.

 const combobox = document.querySelector('smart-combo-box');
 let autoOpenShortcutKey = combobox.autoOpenShortcutKey;

dataSourceany

Determines the data source that will be loaded to the ComboBox. 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-combo-box data-source='["item 1", "item 2"]'></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.dataSource = ["new item 1", "new item 2"];

Get the dataSource property.

 const combobox = document.querySelector('smart-combo-box');
 let dataSource = combobox.dataSource;

disabledboolean

Enables or disables the combo box.

Default value

false

Example

Set the disabled property.

 <smart-combo-box disabled></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.disabled = false;

Get the disabled property.

 const combobox = document.querySelector('smart-combo-box');
 let disabled = combobox.disabled;

displayLoadingIndicatorboolean

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

Default value

false

Example

Set the displayLoadingIndicator property.

 <smart-combo-box display-loading-indicator></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.displayLoadingIndicator = false;

Get the displayLoadingIndicator property.

 const combobox = document.querySelector('smart-combo-box');
 let displayLoadingIndicator = combobox.displayLoadingIndicator;

displayMemberstring

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

Default value

""""

Example

Set the displayMember property.

 <smart-combo-box display-member='label'></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.displayMember = 'name';

Get the displayMember property.

 const combobox = document.querySelector('smart-combo-box');
 let displayMember = combobox.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-combo-box drop-down-append-to='body'></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.dropDownAppendTo = null;

Get the dropDownAppendTo property.

 const combobox = document.querySelector('smart-combo-box');
 let dropDownAppendTo = combobox.dropDownAppendTo;

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

Determines the position of the drop down button.

Default value

"right"

Example

Set the dropDownButtonPosition property.

 <smart-combo-box drop-down-button-position='left'></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.dropDownButtonPosition = 'right';

Get the dropDownButtonPosition property.

 const combobox = document.querySelector('smart-combo-box');
 let dropDownButtonPosition = combobox.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-combo-box drop-down-height='auto'></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.dropDownHeight = 500;

Get the dropDownHeight property.

 const combobox = document.querySelector('smart-combo-box');
 let dropDownHeight = combobox.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-combo-box drop-down-max-height='800'></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.dropDownMaxHeight = 1000;

Get the dropDownMaxHeight property.

 const combobox = document.querySelector('smart-combo-box');
 let dropDownMaxHeight = combobox.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-combo-box drop-down-max-width='500'></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.dropDownMaxWidth = 800;

Get the dropDownMaxWidth property.

 const combobox = document.querySelector('smart-combo-box');
 let dropDownMaxWidth = combobox.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-combo-box drop-down-min-height='50'></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.dropDownMinHeight = 150;

Get the dropDownMinHeight property.

 const combobox = document.querySelector('smart-combo-box');
 let dropDownMinHeight = combobox.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-combo-box drop-down-min-width='100'></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.dropDownMinWidth = 90;

Get the dropDownMinWidth property.

 const combobox = document.querySelector('smart-combo-box');
 let dropDownMinWidth = combobox.dropDownMinWidth;

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

Determines how the drop down is going to open.

Default value

"default"

Example

Set the dropDownOpenMode property.

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

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.dropDownOpenMode = 'auto';

Get the dropDownOpenMode property.

 const combobox = document.querySelector('smart-combo-box');
 let dropDownOpenMode = combobox.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-combo-box drop-down-overlay></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.dropDownOverlay = false;

Get the dropDownOverlay property.

 const combobox = document.querySelector('smart-combo-box');
 let dropDownOverlay = combobox.dropDownOverlay;

dropDownPlaceholderstring

Determines the placeholder for the drop down, displayed when there are no items in it.

Default value

"No Items"

Example

Set the dropDownPlaceholder property.

 <smart-combo-box drop-down-placeholder='No Items'></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.dropDownPlaceholder = 'Empty';

Get the dropDownPlaceholder property.

 const combobox = document.querySelector('smart-combo-box');
 let dropDownPlaceholder = combobox.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-combo-box drop-down-position='top'></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.dropDownPosition = 'bottom';

Get the dropDownPosition property.

 const combobox = document.querySelector('smart-combo-box');
 let dropDownPosition = combobox.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-combo-box drop-down-width='auto'></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.dropDownWidth = 500;

Get the dropDownWidth property.

 const combobox = document.querySelector('smart-combo-box');
 let dropDownWidth = combobox.dropDownWidth;

escKeyMode"none" | "previousValue" | "clearValue"

Determines the behavior of the element when Escape key is pressed.

Default value

"null"

Example

Set the escKeyMode property.

 <smart-combo-box esc-key-mode='contains'></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.escKeyMode = 'equals';

Get the escKeyMode property.

 const combobox = document.querySelector('smart-combo-box');
 let escKeyMode = combobox.escKeyMode;

filterableboolean

Determines whether filtering is enabled.

Default value

false

Example

Set the filterable property.

 <smart-combo-box filterable></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.filterable = false;

Get the filterable property.

 const combobox = document.querySelector('smart-combo-box');
 let filterable = combobox.filterable;

filterInputPlaceholderstring

Determines the placeholder for the drop down list filter input field.

Default value

""

Example

Set the filterInputPlaceholder property.

 <smart-combo-box filter-input-placeholder='Enter a value:'></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.filterInputPlaceholder = 'Awaiting entry:';

Get the filterInputPlaceholder property.

 const combobox = document.querySelector('smart-combo-box');
 let filterInputPlaceholder = combobox.filterInputPlaceholder;

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

Determines the filtering mode of the Combo box.

Default value

"startsWithIgnoreCase"

Example

Set the filterMode property.

 <smart-combo-box filter-mode='contains'></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.filterMode = 'equals';

Get the filterMode property.

 const combobox = document.querySelector('smart-combo-box');
 let filterMode = combobox.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-combo-box grouped></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.grouped = false;

Get the grouped property.

 const combobox = document.querySelector('smart-combo-box');
 let grouped = combobox.grouped;

groupMemberstring

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.

Default value

""

Example

Set the groupMember property.

 <smart-combo-box group-member='group'></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.groupMember = 'section';

Get the groupMember property.

 const combobox = document.querySelector('smart-combo-box');
 let groupMember = combobox.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-combo-box hint='Helper text'></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.hint = 'Hint';

Get the hint property.

 const combobox = document.querySelector('smart-combo-box');
 let hint = combobox.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-combo-box horizontal-scroll-bar-visibility='disabled'></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.horizontalScrollBarVisibility = 'hidden';

Get the horizontalScrollBarVisibility property.

 const combobox = document.querySelector('smart-combo-box');
 let horizontalScrollBarVisibility = combobox.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-combo-box input-member='label'></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.inputMember = 'value';

Get the inputMember property.

 const combobox = document.querySelector('smart-combo-box');
 let inputMember = combobox.inputMember;

inputPurposestring

Sets the purpose of the input and what, if any, permission the user agent has to provide automated assistance in filling out the element's input when in a form, as well as guidance to the browser as to the type of information expected in the element. This value corresponds to the standard HTML autocomplete attribute and can be set to values such as 'on', 'name', 'organization', 'street-address', etc.

Default value

"off"

Example

Set the inputPurpose property.

 <smart-combo-box input-purpose='on'></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.inputPurpose = 'country';

Get the inputPurpose property.

 const combobox = document.querySelector('smart-combo-box');
 let inputPurpose = combobox.inputPurpose;

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-combo-box incremental-search-delay='100'></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.incrementalSearchDelay = 500;

Get the incrementalSearchDelay property.

 const combobox = document.querySelector('smart-combo-box');
 let incrementalSearchDelay = combobox.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-combo-box incremental-search-mode='contains'></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.incrementalSearchMode = 'endsWith';

Get the incrementalSearchMode property.

 const combobox = document.querySelector('smart-combo-box');
 let incrementalSearchMode = combobox.incrementalSearchMode;

itemHeightnumber

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

Example

Set the itemHeight property.

 <smart-combo-box item-height='20'></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.itemHeight = 30;

Get the itemHeight property.

 const combobox = document.querySelector('smart-combo-box');
 let itemHeight = combobox.itemHeight;

itemMeasureMode"auto" | "precise"

Determines the item width measuring algorithm.

Default value

"auto"

Example

Set the itemMeasureMode property.

 <smart-combo-box item-measure-mode='precise'></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.itemMeasureMode = 'auto';

Get the itemMeasureMode property.

 const combobox = document.querySelector('smart-combo-box');
 let itemMeasureMode = combobox.itemMeasureMode;

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

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. It's used to set a customize the content of the list items.

Example

Set the itemTemplate property.

 <smart-combo-box item-template=''templateA''></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.itemTemplate = 'templateB';

Get the itemTemplate property.

 const combobox = document.querySelector('smart-combo-box');
 let itemTemplate = combobox.itemTemplate;

labelstring

Sets a little text label above the element.

Default value

""

Example

Set the label property.

 <smart-combo-box label='Helper text'></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.label = 'Label';

Get the label property.

 const combobox = document.querySelector('smart-combo-box');
 let label = combobox.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-combo-box loading-indicator-placeholder='Incoming data'></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.loadingIndicatorPlaceholder = 'LOADING...';

Get the loadingIndicatorPlaceholder property.

 const combobox = document.querySelector('smart-combo-box');
 let loadingIndicatorPlaceholder = combobox.loadingIndicatorPlaceholder;

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

Determines the position of the loading indicator.

Default value

"center"

Example

Set the loadingIndicatorPosition property.

 <smart-combo-box loading-indicator-position='bottom'></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.loadingIndicatorPosition = 'top';

Get the loadingIndicatorPosition property.

 const combobox = document.querySelector('smart-combo-box');
 let loadingIndicatorPosition = combobox.loadingIndicatorPosition;

localestring

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

Default value

"en"

Example

Set the locale property.

 <smart-combo-box locale='de'></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.locale = 'en';

Get the locale property.

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

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.localizeFormatFunction = function(defaultMessage, message, messageArguments){return '...'};

Get the localizeFormatFunction property.

 const combobox = document.querySelector('smart-combo-box');
 let localizeFormatFunction = combobox.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-combo-box 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-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.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 combobox = document.querySelector('smart-combo-box');
 let messages = combobox.messages;

minLengthnumber

Determines the minimum number of characters inside the input in order to trigger the autocomplete functionality

Default value

2

Example

Set the minLength property.

 <smart-combo-box min-length='3'></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.minLength = 4;

Get the minLength property.

 const combobox = document.querySelector('smart-combo-box');
 let minLength = combobox.minLength;

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-combo-box name='combobox'></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.name = 'comboBox2';

Get the name property.

 const combobox = document.querySelector('smart-combo-box');
 let name = combobox.name;

openedboolean

Determines whether the popup is opened or closed

Default value

false

Example

Set the opened property.

 <smart-combo-box opened></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.opened = false;

Get the opened property.

 const combobox = document.querySelector('smart-combo-box');
 let opened = combobox.opened;

placeholderstring

Determines the input's placeholder.

Default value

""

Example

Set the placeholder property.

 <smart-combo-box placeholder='Choose:'></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.placeholder = 'Submit';

Get the placeholder property.

 const combobox = document.querySelector('smart-combo-box');
 let placeholder = combobox.placeholder;

readonlyboolean

Disables user interaction with the element.

Default value

false

Example

Set the readonly property.

 <smart-combo-box readonly></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.readonly = false;

Get the readonly property.

 const combobox = document.querySelector('smart-combo-box');
 let readonly = combobox.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-combo-box right-to-left></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.rightToLeft = true;

Get the rightToLeft property.

 const combobox = document.querySelector('smart-combo-box');
 let rightToLeft = combobox.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-combo-box resize-indicator></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.resizeIndicator = false;

Get the resizeIndicator property.

 const combobox = document.querySelector('smart-combo-box');
 let resizeIndicator = combobox.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

"null"

Example

Set the resizeMode property.

 <smart-combo-box resize-mode='horizontal'></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.resizeMode = 'vertical';

Get the resizeMode property.

 const combobox = document.querySelector('smart-combo-box');
 let resizeMode = combobox.resizeMode;

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

Determines what will be displayed in the input.

Default value

"plain"

Example

Set the selectionDisplayMode property.

 <smart-combo-box selection-display-mode='placeholder'></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.selectionDisplayMode = 'default';

Get the selectionDisplayMode property.

 const combobox = document.querySelector('smart-combo-box');
 let selectionDisplayMode = combobox.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-combo-box selected-indexes='[1,2,3]'></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.selectedIndexes = [4,5,6];

Get the selectedIndexes property.

 const combobox = document.querySelector('smart-combo-box');
 let selectedIndexes = combobox.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-combo-box selected-values='["item 1"]'></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.selectedValues = ["item 2"];

Get the selectedValues property.

 const combobox = document.querySelector('smart-combo-box');
 let selectedValues = combobox.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-combo-box selection-mode='zeroOrMany'></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.selectionMode = 'oneOrMany';

Get the selectionMode property.

 const combobox = document.querySelector('smart-combo-box');
 let selectionMode = combobox.selectionMode;

sortedboolean

Determines whether the items are sorted alphabetically or not

Default value

false

Example

Set the sorted property.

 <smart-combo-box sorted></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.sorted = false;

Get the sorted property.

 const combobox = document.querySelector('smart-combo-box');
 let sorted = combobox.sorted;

sortDirectionstring

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

Default value

"asc"

Example

Set the sortDirection property.

 <smart-combo-box sort-direction='desc'></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.sortDirection = 'asc';

Get the sortDirection property.

 const combobox = document.querySelector('smart-combo-box');
 let sortDirection = combobox.sortDirection;

themestring

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

Default value

""

Example

Set the theme property.

 <smart-combo-box theme='blue'></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.theme = 'red';

Get the theme property.

 const combobox = document.querySelector('smart-combo-box');
 let theme = combobox.theme;

tokenTemplateany

Sets a custom content for the tokens when selectionDisplayMode is set to 'tokens'. Tokens are used only for multiple selection.

Example

Set the tokenTemplate property.

 <smart-combo-box token-template='tokenTemplate'></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.tokenTemplate = null;

Get the tokenTemplate property.

 const combobox = document.querySelector('smart-combo-box');
 let tokenTemplate = combobox.tokenTemplate;

unfocusableboolean

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

Default value

false

Example

Set the unfocusable property.

 <smart-combo-box unfocusable></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.unfocusable = false;

Get the unfocusable property.

 const combobox = document.querySelector('smart-combo-box');
 let unfocusable = combobox.unfocusable;

valuestring

Sets or gets the value.

Default value

""

Example

Set the value property.

 <smart-combo-box value='val1'></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.value = 'val2';

Get the value property.

 const combobox = document.querySelector('smart-combo-box');
 let value = combobox.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-combo-box value-member='value'></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.valueMember = 'newValue';

Get the valueMember property.

 const combobox = document.querySelector('smart-combo-box');
 let valueMember = combobox.valueMember;

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

Determines the visibility of the vertical scroll bar.

Default value

"auto"

Example

Set the verticalScrollBarVisibility property.

 <smart-combo-box vertical-scroll-bar-visibility='hidden'></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.verticalScrollBarVisibility = 'visible';

Get the verticalScrollBarVisibility property.

 const combobox = document.querySelector('smart-combo-box');
 let verticalScrollBarVisibility = combobox.verticalScrollBarVisibility;

virtualizedboolean

Determines weather or not Virtualization is used for the Combo box. Virtualization allows a huge amount of items to be loaded to the List box while preserving the performance. For example a milion items can be loaded to the list box.

Default value

false

Example

Set the virtualized property.

 <smart-combo-box virtualized></smart-combo-box>

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

 const combobox = document.querySelector('smart-combo-box');
 combobox.virtualized = false;

Get the virtualized property.

 const combobox = document.querySelector('smart-combo-box');
 let virtualized = combobox.virtualized;

Events

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 combobox = document.querySelector('smart-combo-box');
combobox.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 combobox = document.querySelector('smart-combo-box');
combobox.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 combobox = document.querySelector('smart-combo-box');
combobox.addEventListener('closing', 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 combobox = document.querySelector('smart-combo-box');
combobox.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 combobox = document.querySelector('smart-combo-box');
combobox.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 combobox = document.querySelector('smart-combo-box');
combobox.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 combobox = document.querySelector('smart-combo-box');
combobox.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 combobox = document.querySelector('smart-combo-box');
combobox.addEventListener('resizeEnd', function (event) {
    const detail = event.detail,
        position = detail.position;

	// event handling code goes here.
})

scrollBottomReachedCustomEvent

This event is triggered when 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 combobox = document.querySelector('smart-combo-box');
combobox.addEventListener('scrollBottomReached', function (event) {
	// event handling code goes here.
})

scrollTopReachedCustomEvent

This event is triggered when 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 combobox = document.querySelector('smart-combo-box');
combobox.addEventListener('scrollTopReached', function (event) {
	// event handling code goes here.
})

tokenClickCustomEvent

This event is triggered when a token item(pill) has been clicked. This event allows to cancel the opening operation calling event.preventDefault() in the event handler function.

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

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

const combobox = document.querySelector('smart-combo-box');
combobox.addEventListener('tokenClick', 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 combobox = document.querySelector('smart-combo-box');
combobox.clearItems();

clearSelection(): void

Unselects all items.


Invoke the clearSelection method.

const combobox = document.querySelector('smart-combo-box');
combobox.clearSelection();

close(): void

Closes the dropDown list.


Invoke the close method.

const combobox = document.querySelector('smart-combo-box');
combobox.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 combobox = document.querySelector('smart-combo-box');
combobox.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 combobox = document.querySelector('smart-combo-box');
const result = combobox.getItem("First");

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

Inserts a new item at a specified position.

Arguments

positionnumber

The position where the item must be inserted.

itemany

Describes the properties of the item that will be inserted.


Invoke the insert method.

const combobox = document.querySelector('smart-combo-box');
combobox.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 combobox = document.querySelector('smart-combo-box');
combobox.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 combobox = document.querySelector('smart-combo-box');
combobox.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 combobox = document.querySelector('smart-combo-box');
combobox.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 combobox = document.querySelector('smart-combo-box');
combobox.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 combobox = document.querySelector('smart-combo-box');
combobox.update(5,"'Updated item'");

Try a demo showcasing the update method.

CSS Variables

--smart-combo-box-default-widthvar()

Default value

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

smartComboBox default width

--smart-combo-box-default-heightvar()

Default value

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

smartComboBox default height

--smart-combo-box-drop-down-widthvar()

Default value

"auto"

smartComboBox default width

--smart-combo-box-drop-down-heightvar()

Default value

"auto"

smartComboBox default 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

""