ComboBox JAVASCRIPT UI Component API

ComboBox Javascript API

Class

ComboBox
ListItem
ListItemsGroup

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

AautoCloseDelayUsed only when dropDownOpenMode is set to 'auto'. Determines the delay before the opened drop down closes if the pointer is not over the element.
AautoCompleteDetermines the autocomplete mode. Auto complete modes filter the items from the dataSource and show only those that match the input.
AautoCompleteDelayDetermines the delay before the drop down opens to show the matches from the auto complete operation. The delay is measured in miliseconds.
AautoOpenShortcutKeyAllows the user to define a custom key name ( or multiple key names) to open that popup with.
DdataSourceDetermines 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.
DdisabledEnables or disables the combo box.
DdisplayLoadingIndicatorDetermines whether an indicator will appear during filtering and remote item loading.
DdisplayMemberSets 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.
DdropDownAppendToDetermines the drop down parent. The expected value is CSS Selector, ID or 'body'. 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.
DdropDownButtonPositionDetermines the position of the drop down button.
DdropDownHeightSets 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.
DdropDownMaxHeightSets 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.
DdropDownMaxWidthSets 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.
DdropDownMinHeightSets 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.
DdropDownMinWidthSets 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.
DdropDownOpenModeDetermines how the drop down is going to open.
DdropDownOverlayIf 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.
DdropDownPlaceholderDetermines the placeholder for the drop down, displayed when there are no items in it.
DdropDownPositionDetermines the position of the drop down when opened.
DdropDownWidthSets 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.
EescKeyModeDetermines the behavior of the element when Escape key is pressed.
FfilterableDetermines whether filtering is enabled.
FfilterInputPlaceholderDetermines the placeholder for the drop down list filter input field.
FfilterModeDetermines the filtering mode of the Combo box.
GgroupedIf enabled, the items will be grouped by their first letter. Can't be applied if the dataSource already contains groups.
GgroupMemberDetermines 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.
HhintSets additional helper text below the element. The hint is visible only when the element is focused.
HhorizontalScrollBarVisibilityDetermines the visibility of the horizontal Scroll bar inside the drop down.
IinputMemberRepresents 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.
IinputPurposeSets 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.
IincrementalSearchDelayIncrementalSearchDelay 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.
IincrementalSearchModeSets 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.
IitemHeightSets the height for all list items. Used only when virtualization is enabled.
IitemMeasureModeDetermines the item width measuring algorithm.
IitemsA getter that returns an array of all List items inside the drop down.
IitemTemplateThe 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.
LlabelSets a little text label above the element.
LloadingIndicatorPlaceholderDetermines the text that will be displayed next to the loading indicator when the loader is visible and it's position is top or bottom.
LloadingIndicatorPositionDetermines the position of the loading indicator.
LlocaleSets or gets the language. Used in conjunction with the property messages.
LlocalizeFormatFunctionCallback used to customize the format of the messages that are returned from the Localization Module.
MmessagesSets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.
MminLengthDetermines the minimum number of characters inside the input in order to trigger the autocomplete functionality
MmaxLengthDetermines the maximum number of characters inside the input.
NnameSets or gets the name attribute for the element. Name is used when submiting HTML forms.
OopenedDetermines whether the popup is opened or closed
PplaceholderDetermines the input's placeholder.
RreadonlyDisables user interaction with the element.
RrightToLeftSets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.
RresizeIndicatorDetermines 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.
RresizeModeDetermines 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.
SselectionDisplayModeDetermines what will be displayed in the input.
SselectedIndexesSets or gets the selected indexes. Selected indexes represents an array of the indexes of the items that should be selected.
SselectedValuesSets or gets elected indexes. Selected values represents the values of the items that should be selected.
SselectionModeDetermines how many items can be selected.
SsortedDetermines whether the items are sorted alphabetically or not
SsortDirectionDetermines sorting direction - ascending(asc) or descending(desc)
TthemeDetermines the theme for the element. Themes define the look of the elements.
TtokenTemplateSets a custom content for the tokens when selectionDisplayMode is set to 'tokens'. Tokens are used only for multiple selection.
UunfocusableIf is set to true, the element cannot be focused.
VvalueSets or gets the value.
VvalueMemberDetermines 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.
VverticalScrollBarVisibilityDetermines the visibility of the vertical scroll bar.
VvirtualizedDetermines 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.

Events

CchangeThis event is triggered when the selection is changed.
CcloseThis event is triggered when the drop down list is closed.
CclosingThis 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.
IitemClickThis event is triggered when an item is clicked.
OopenThis event is triggered when the drop down list is opened.
OopeningThis 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.
RresizeStartThis event is triggered when user starts resizing the drop down.
RresizeEndThis event is triggered when the resizing of the drop down is finished.
SscrollBottomReachedThis event is triggered when user scrolls to the end of the dropDown list.
SscrollTopReachedThis event is triggered when user scrolls to the start of the dropDown list.
TtokenClickThis 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.

Methods

AaddAdds a new item(s).
CclearItemsRemoves all items from the drop down list.
CclearSelectionUnselects all items.
CcloseCloses the dropDown list.
DdataBindPerforms a data bind. This can be used to refresh the data source.
EensureVisibleEnsures the desired item is visible by scrolling to it.
GgetItemReturns an item instance from the dropDown list.
IinsertInserts a new item at a specified position.
OopenOpens the dropDown list.
RremoveAtRemoves an item at a specified position.
SselectSelects an item from the dropDown list.
UunselectUnselects an item from the dropDown list.
UupdateUpdates an item from the dropDown list.

Properties

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.

Allowed Values

  • "none" - Auto complete is disabled.
  • "auto" - When the input matches one or many items from the dataSource the drop down opens and displays the matched items. The first suggested item is automatically highlighted as selected and becomes the value of the textbox when the combobox loses focus unless the user chooses a different item or changes the character string in the textbox.
  • "inline" - When the input matches one or many items from the dataSource the drop down opens and displays the matched items. The first suggested item is automatically highlighted as selected and becomes the value of the textbox when the combobox loses focus unless the user chooses a different item or changes the character string in the textbox. In addition to that a completion helper that appears next to the input cursor in the input. This helper shows the first possible match by completing the input text.
  • "manual" - When the input matches one or many items from the dataSource the drop down opens and displays the matched items.

Default value

"none"
Try a demo showcasing the autoComplete property.

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.

Try a demo showcasing the autoOpenShortcutKey property.

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
Try a demo showcasing the disabled property.

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;

dropDownAppendTostring

Determines the drop down parent. The expected value is CSS Selector, ID or 'body'. 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.

Default value

"null"
Try a demo showcasing the dropDownAppendTo property.

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.

Allowed Values

  • "left" - Positions the drop down button on the left side of the element.
  • "right" - Positions the drop down button on the right side of the element.
  • "top" - Positions the drop down button on the top side of the element.
  • "bottom" - Positions the drop down button on the bottom side of the element.

Default value

"right"
Try a demo showcasing the dropDownButtonPosition property.

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.

Allowed Values

  • "none" - The drop down can't be opened.
  • "default" - The drop down opens when the user clicks on the element
  • "dropDownButton" - The element is split in two button: action and drop down buttons. The drop down opens only when the button is clicked. The action button fires a custom event when clicked on. The event can be used to execute a custom operation on click.
  • "auto" - The drop down opens when the element is hovered and closes when not.

Default value

"default"
Try a demo showcasing the dropDownOpenMode property.

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.

Allowed Values

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

Default value

"auto"
Try a demo showcasing the dropDownPosition property.

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.

Allowed Values

  • "none" - Nothing happens on escape key.
  • "previousValue" - The previous value is displayed.
  • "clearValue" - The value is cleared.

Default value

"null"
Try a demo showcasing the escKeyMode property.

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
Try a demo showcasing the filterable property.

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.

Allowed Values

  • "contains" - displays only items with labels that contain the filter string (case sensitive)
  • "containsIgnoreCase" - displays only items with labels that contain the filter string (case insensitive)
  • "custom" - filtering is applied according to the callback function filterCallback
  • "doesNotContain" - displays only items with labels that do not contain the filter string (case sensitive)
  • "doesNotContainIgnoreCase" - displays only items with labels that do not contain the filter string (case insensitive)
  • "equals" - displays only items with labels that equal the filter string (case sensitive)
  • "equalsIgnoreCase" - displays only items with labels that equal the filter string (case insensitive)
  • "startsWith" - displays only items with labels that start with the filter string (case sensitive)
  • "startsWithIgnoreCase" - displays only items with labels that start with the filter string (case insensitive)
  • "endsWith" - displays only items with labels that end with the filter string (case sensitive)
  • "endsWithIgnoreCase" - displays only items with labels that end with the filter string (case insensitive)

Default value

"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
Try a demo showcasing the grouped property.

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.

Allowed Values

  • "auto" - The element automatically determines whether or not the horizontal Scroll bar should be visible or not.
  • "disabled" - Disables the horizontal Scroll bar.
  • "hidden" - Hides the horizontal Scroll bar.
  • "visible" - Shows the horizontal Scroll bar even if not necessary.

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.

Allowed Values

  • "contains" - focuses the item that contains the search query ( case sensitive)
  • "containsIgnoreCase" - focuses the item that contains the search query (case insensitive)
  • "doesNotContain" - focuses the item that does not contain the search query (case sensitive)
  • "doesNotContainIgnoreCase" - focuses the item that does not contain the search query (case insensitive)
  • "equals" - focuses the item that is equal the search query (case sensitive)
  • "equalsIgnoreCase" - focuses the item that is equal the search query (case insensitive)
  • "startsWith" - focuses the item that starts with the search query (case sensitive)
  • "startsWithIgnoreCase" - focuses the item that starts with the search query (case insensitive)
  • "endsWith" - focuses the item that ends with the search query (case sensitive)
  • "endsWithIgnoreCase" - focuses the item that starts with the search query (case insensitive)

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.

Allowed Values

  • "auto" - measures items based on the number of characters in their label
  • "precise" - measures items based on their actual size in the DOM; may hinder performance for large data sources

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.

Try a demo showcasing the itemTemplate property.

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

""
Try a demo showcasing the label property.

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.

Allowed Values

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

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
Try a demo showcasing the minLength property.

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;

maxLengthnumber

Determines the maximum number of characters inside the input.

Default value

-1

Example

Set the maxLength property. 

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

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

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

Get the maxLength property. 

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

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
Try a demo showcasing the rightToLeft property.

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.

Allowed Values

  • "none" - Resizing the drop down is not allowed.
  • "horizontal" - Horizontal resizing of the drop down is allowed but not vertical.
  • "vertical" - Vertical resizing of the drop down is allowed but not horizontal.
  • "both" - Resizing the drop down is allowed in all directions.

Default value

"null"
Try a demo showcasing the resizeMode property.

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.

Allowed Values

  • "plain" - Default behavior. The selected item's label appears in the input of the element.
  • "placeholder" - The placeholder of the input is always shown regardless of the current selection.
  • "tokens" - Token items are being appended to input field for each selected item. Tokens are used for multiple selection modes. When a token's label is clicked the drop down opens and the corresponding item will be focused.

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" | "zeroAndOne" | "zeroOrOne" | "one" | "checkBox" | "radioButton"

Determines how many items can be selected.

Allowed Values

  • "none" - Item selection is not allowed.
  • "oneOrManyExtended" - Only one item can be selected unless when pressing the Shift or Control keys of the keyboard more then one item can be selected. Shift key allows to select a range of items while Control allows to select/unselect speciic items. There is always at least one selected item
  • "zeroOrMany" - Zero or many items can be selected.
  • "oneOrMany" - One or more items must be selected. There is always at least one selected item
  • "zeroAndOne" - Only one item can optionally be selected.
  • "zeroOrOne" - Zero or one item can be selected.
  • "one" - Only one item can be selected. There is always at least one selected item
  • "checkBox" - A Check box appears next to every List item inside the drop down. One, many or zero items can be selected.
  • "radioButton" - A radio button appears next to every List item inside the drop down. Only one item can be selected or one item per group if grouped is enabled.

Default value

"zeroAndOne"

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
Try a demo showcasing the sorted property.

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.

Try a demo showcasing the tokenTemplate property.

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.

Allowed Values

  • "auto" - The element automatically determines whether or not the horizontal scroll bar should be visible or not.
  • "disabled" - Disables the horizontal scroll bar.
  • "hidden" - Hides the horizontal scroll bar.
  • "visible" - Shows the horizontal scroll bar even if not necessary.

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

add( item: any): void

Adds a new item(s).

Arguments

itemany

Describes the properties of the item that will be inserted. You can also pass an array of items.


Invoke the add method.

const combobox = document.querySelector('smart-combo-box');
combobox.add("'New item'");

Try a demo showcasing the add method.

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.

dataBind(): void

Performs a data bind. This can be used to refresh the data source.


Invoke the dataBind method.

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

Try a demo showcasing the dataBind 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. You can also pass an array of items.


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

AalternationIndexalternationIndex
Ccolorcolor
DdisplayModedisplayMode
Ggroupedgrouped
Sselectedselected
Vvaluevalue
Llabellabel
Ddetailsdetails
Ggroupgroup
Hhiddenhidden
Rreadonlyreadonly

Properties

alternationIndexnumber

Default value

-1

colorstring

Default value

""

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

Default value

"plain"

groupedboolean

Default value

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

selectedboolean

Default value

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

valuestring

Default value

""

labelstring

Default value

""

detailsstring

Default value

""

groupstring

Default value

""

hiddenboolean

Default value

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

readonlyboolean

Default value

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


ListItemsGroup

Defines a group of list items.

Selector

smart-list-items-group

Properties

Llabellabel

Properties

labelstring

Default value

""