DropDownList JAVASCRIPT UI Component API

DropDownList Javascript API

Class

DropDownList
ListItem
ListItemsGroup

DropDownList

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

Selector

smart-drop-down-list

Properties

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.
DdataSourceDetermines the data source that will be loaded to the DropDownList. The dataSource can be an array of strings/numbers or objects where the attributes represent the properties of a List Item. For example label, value, group. It can also be a callback that returns an Array of items as previously described.
DdisabledEnables or disables the element.
DdisplayLoadingIndicatorDetermines whether an indicator will appear during filtering and remote item loading.
DdisplayMemberSets or gets the displayMember. The displayMember specifies the name of an object property to display. The name is contained in the collection specified by the 'dataSource' property.
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 list when it's empty.
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.
FfilterableDetermines whether filtering is enabled.
FfilterInputPlaceholderDetermines the placeholder for the filter input inside the drop down that is only visible when filterable is enabled.
FfilterModeDetermines the filtering mode of the drop down list.
FfilterCallbackA callback that should return a condition that will be used for custom item filtering. Used in conjunction with filterMode 'custom'
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.
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 or it's direct reference. 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.
NnameSets or gets the name attribute for the element. Name is used when submiting HTML forms.
OopenedDetermines whether the popup is opened or not.
PplaceholderDetermines the element's placeholder, displayed in the element's selection field.
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 dropDown selection field.
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 template for the content of the tokens when selectionDisplayMode is set to 'tokens'.
UunfocusableIf is set to true, the element cannot be focused.
VvalueSets or gets the value. Returns the selection. Return type: {label: string, value: any}[].
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. Virtualization allows a huge amount of items to be loaded to the drop down while preserving the performance. For example a milion items can be loaded.

Events

AactionButtonClickThis event is triggered when user clicks on the action button. The action button is only visible when dropDownOpenMode is set to 'dropDownbutton'.
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.
DdropDownButtonClickThis event is triggered when user clicks on the drop down button.
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 the user scrolls to the end of the dropDown list.
SscrollTopReachedThis event is triggered when the user scrolls to the start of the dropDown list.

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-drop-down-list auto-close-delay='50'></smart-drop-down-list>

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

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

Get the autoCloseDelay property. 

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

dataSourceany

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

Example

Set the dataSource property. 

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

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

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

Get the dataSource property. 

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

disabledboolean

Enables or disables the element.

Default value

false
Try a demo showcasing the disabled property.

Example

Set the disabled property. 

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

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

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

Get the disabled property. 

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

displayLoadingIndicatorboolean

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

Default value

false

Example

Set the displayLoadingIndicator property. 

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

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

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

Get the displayLoadingIndicator property. 

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

displayMemberstring

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

Default value

""""

Example

Set the displayMember property. 

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

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

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

Get the displayMember property. 

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

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-drop-down-list drop-down-append-to=''body''></smart-drop-down-list>

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

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

Get the dropDownAppendTo property. 

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

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

Determines the position of the drop down button.

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-drop-down-list drop-down-button-position='top'></smart-drop-down-list>

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

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

Get the dropDownButtonPosition property. 

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

dropDownHeightstring | number

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

Default value

""

Example

Set the dropDownHeight property. 

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

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

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

Get the dropDownHeight property. 

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

dropDownMaxHeightstring | number

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

Default value

""

Example

Set the dropDownMaxHeight property. 

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

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

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

Get the dropDownMaxHeight property. 

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

dropDownMaxWidthstring | number

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

Default value

""

Example

Set the dropDownMaxWidth property. 

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

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

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

Get the dropDownMaxWidth property. 

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

dropDownMinHeightstring | number

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

Default value

""

Example

Set the dropDownMinHeight property. 

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

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

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

Get the dropDownMinHeight property. 

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

dropDownMinWidthstring | number

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

Default value

""

Example

Set the dropDownMinWidth property. 

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

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

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

Get the dropDownMinWidth property. 

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

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

Determines how the drop down is going to open.

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 closed when not.

Default value

"default"
Try a demo showcasing the dropDownOpenMode property.

Example

Set the dropDownOpenMode property. 

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

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

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

Get the dropDownOpenMode property. 

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

dropDownOverlayboolean

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

Default value

false

Example

Set the dropDownOverlay property. 

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

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

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

Get the dropDownOverlay property. 

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

dropDownPlaceholderstring

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

Default value

"No Items"

Example

Set the dropDownPlaceholder property. 

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

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

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

Get the dropDownPlaceholder property. 

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

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

Determines the position of the drop down when opened.

Allowed Values

  • "auto" - The position is automatically determined by measuring the available distance around the element for the drop down to open freely without being clipped by the edges of the browser. By default the drop down will try to open below the element. If the available space is not enough for the popup to appear it will open in one of the following directions, if possible: top, over.
  • "top" - 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-drop-down-list drop-down-position='top'></smart-drop-down-list>

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

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

Get the dropDownPosition property. 

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

dropDownWidthstring | number

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

Default value

""

Example

Set the dropDownWidth property. 

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

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

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

Get the dropDownWidth property. 

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

filterableboolean

Determines whether filtering is enabled.

Default value

false
Try a demo showcasing the filterable property.

Example

Set the filterable property. 

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

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

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

Get the filterable property. 

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

filterInputPlaceholderstring

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

Default value

""

Example

Set the filterInputPlaceholder property. 

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

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

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

Get the filterInputPlaceholder property. 

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

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

Determines the filtering mode of the drop down list.

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-drop-down-list filter-mode='contains'></smart-drop-down-list>

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

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

Get the filterMode property. 

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

filterCallbackfunction | null

A callback that should return a condition that will be used for custom item filtering. Used in conjunction with filterMode 'custom'

Try a demo showcasing the filterCallback property.

Example

Set the filterCallback property. 

 <smart-drop-down-list filter-callback='function(item, searchQuery) { return item.value.toLowerCase() === searchQuery.toLowerCase() }'></smart-drop-down-list>

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

 const dropdownlist = document.querySelector('smart-drop-down-list');
 dropdownlist.filterCallback = function(item, searchQuery) { return item.value > 5 };

Get the filterCallback property. 

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

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-drop-down-list grouped></smart-drop-down-list>

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

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

Get the grouped property. 

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

groupMemberstring | null

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

Example

Set the groupMember property. 

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

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

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

Get the groupMember property. 

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

hintstring

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

Default value

""

Example

Set the hint property. 

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

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

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

Get the hint property. 

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

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

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

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-drop-down-list horizontal-scroll-bar-visibility='disabled'></smart-drop-down-list>

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

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

Get the horizontalScrollBarVisibility property. 

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

inputMemberstring

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

Default value

""

Example

Set the inputMember property. 

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

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

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

Get the inputMember property. 

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

incrementalSearchDelaynumber

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

Default value

700

Example

Set the incrementalSearchDelay property. 

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

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

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

Get the incrementalSearchDelay property. 

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

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

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

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-drop-down-list incremental-search-mode='contains'></smart-drop-down-list>

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

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

Get the incrementalSearchMode property. 

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

itemHeightnumber | null

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

Example

Set the itemHeight property. 

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

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

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

Get the itemHeight property. 

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

itemMeasureMode"auto" | "precise"

Determines the item width measuring algorithm.

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-drop-down-list item-measure-mode='precise'></smart-drop-down-list>

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

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

Get the itemMeasureMode property. 

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

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

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

Default value

""

itemTemplateany

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

Try a demo showcasing the itemTemplate property.

Example

Set the itemTemplate property. 

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

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

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

Get the itemTemplate property. 

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

labelstring

Sets a little text label above the element.

Default value

""

Example

Set the label property. 

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

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

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

Get the label property. 

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

loadingIndicatorPlaceholderstring

Determines the text that will be displayed next to the loading indicator when the loader is visible and it's position is top or bottom.

Default value

"Loading..."

Example

Set the loadingIndicatorPlaceholder property. 

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

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

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

Get the loadingIndicatorPlaceholder property. 

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

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

Determines the position of the loading indicator.

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-drop-down-list loading-indicator-position='bottom'></smart-drop-down-list>

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

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

Get the loadingIndicatorPosition property. 

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

localestring

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

Default value

"en"

Example

Set the locale property. 

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

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

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

Get the locale property. 

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

localizeFormatFunctionfunction | null

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

Example

Set the localizeFormatFunction property. 

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

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

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

Get the localizeFormatFunction property. 

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

messagesobject

Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.

Default value




"en": {

"propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",

"propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!",

"propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!",

"elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",

"moduleUndefined": "Module is undefined.",

"missingReference": "{{elementType}}: Missing reference to {{files}}.",

"htmlTemplateNotSuported": "{{elementType}}: Browser doesn't support HTMLTemplate elements.",

"invalidTemplate": "{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",

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

}

Example

Set the messages property. 

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

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

 const dropdownlist = document.querySelector('smart-drop-down-list');
 dropdownlist.messages = {"en":{"propertyUnknownType":"'{{name}}' property is with undefined 'type' member!","propertyInvalidValue":"Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!","propertyInvalidValueType":"Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!","elementNotInDOM":"Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.","moduleUndefined":"Module is undefined.","missingReference":"{{elementType}}: Missing reference to {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser doesn't support HTMLTemplate elements.","invalidTemplate":"{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM.","invalidNode":"{{elementType}}: Invalid parameter '{{node}}' when calling {{method}}."}};

Get the messages property. 

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

namestring

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

Default value

""

Example

Set the name property. 

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

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

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

Get the name property. 

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

openedboolean

Determines whether the popup is opened or not.

Default value

false

Example

Set the opened property. 

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

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

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

Get the opened property. 

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

placeholderstring

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

Default value

""
Try a demo showcasing the placeholder property.

Example

Set the placeholder property. 

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

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

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

Get the placeholder property. 

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

readonlyboolean

Disables user interaction with the element.

Default value

false

Example

Set the readonly property. 

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

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

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

Get the readonly property. 

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

rightToLeftboolean

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

Default value

false
Try a demo showcasing the rightToLeft property.

Example

Set the rightToLeft property. 

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

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

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

Get the rightToLeft property. 

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

resizeIndicatorboolean

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

Default value

false

Example

Set the resizeIndicator property. 

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

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

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

Get the resizeIndicator property. 

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

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

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

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

"none"
Try a demo showcasing the resizeMode property.

Example

Set the resizeMode property. 

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

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

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

Get the resizeMode property. 

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

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

Determines what will be displayed in the dropDown selection field.

Allowed Values

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

Default value

"plain"

Example

Set the selectionDisplayMode property. 

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

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

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

Get the selectionDisplayMode property. 

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

selectedIndexesnumber[]

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

Example

Set the selectedIndexes property. 

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

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

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

Get the selectedIndexes property. 

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

selectedValuesstring[]

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

Example

Set the selectedValues property. 

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

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

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

Get the selectedValues property. 

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

selectionMode"none" | "oneOrManyExtended" | "zeroOrMany" | "oneOrMany" | "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 but 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-drop-down-list selection-mode='none'></smart-drop-down-list>

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

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

Get the selectionMode property. 

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

sortedboolean

Determines whether the items are sorted alphabetically or not

Default value

false
Try a demo showcasing the sorted property.

Example

Set the sorted property. 

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

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

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

Get the sorted property. 

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

sortDirectionstring

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

Default value

"asc"

Example

Set the sortDirection property. 

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

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

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

Get the sortDirection property. 

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

themestring

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

Default value

""

Example

Set the theme property. 

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

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

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

Get the theme property. 

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

tokenTemplateany

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

Try a demo showcasing the tokenTemplate property.

Example

Set the tokenTemplate property. 

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

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

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

Get the tokenTemplate property. 

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

unfocusableboolean

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

Default value

false

Example

Set the unfocusable property. 

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

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

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

Get the unfocusable property. 

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

valueany

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

Example

Set the value property. 

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

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

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

Get the value property. 

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

valueMemberstring

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

Default value

""""

Example

Set the valueMember property. 

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

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

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

Get the valueMember property. 

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

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

Determines the visibility of the vertical scroll bar.

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-drop-down-list vertical-scroll-bar-visibility='hidden'></smart-drop-down-list>

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

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

Get the verticalScrollBarVisibility property. 

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

virtualizedboolean

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

Default value

false

Example

Set the virtualized property. 

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

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

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

Get the virtualized property. 

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

Events

actionButtonClickCustomEvent

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

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

Arguments

evCustomEvent

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of actionButtonClick event. 

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

changeCustomEvent

This event is triggered when the selection is changed.

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

Arguments

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

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of change event. 

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

	// event handling code goes here.
})

closeCustomEvent

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

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

Arguments

evCustomEvent

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of close event. 

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

closingCustomEvent

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

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

Arguments

evCustomEvent

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of closing event. 

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

dropDownButtonClickCustomEvent

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

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

Arguments

evCustomEvent

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of dropDownButtonClick event. 

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

itemClickCustomEvent

This event is triggered when an item is clicked.

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

Arguments

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

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of itemClick event. 

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

	// event handling code goes here.
})

openCustomEvent

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

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

Arguments

evCustomEvent

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of open event. 

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

openingCustomEvent

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

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

Arguments

evCustomEvent

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of opening event. 

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

resizeStartCustomEvent

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

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

Arguments

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

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of resizeStart event. 

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

	// event handling code goes here.
})

resizeEndCustomEvent

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

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

Arguments

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

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of resizeEnd event. 

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

	// event handling code goes here.
})

scrollBottomReachedCustomEvent

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

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

Arguments

evCustomEvent

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of scrollBottomReached event. 

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

scrollTopReachedCustomEvent

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

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

Arguments

evCustomEvent

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of scrollTopReached event. 

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

Methods

appendChild( node: Node): T

Arguments

nodeNode

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

ReturnsNode

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 dropdownlist = document.querySelector('smart-drop-down-list');
dropdownlist.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 dropdownlist = document.querySelector('smart-drop-down-list');
dropdownlist.clearItems();

clearSelection(): void

Unselects all items.


Invoke the clearSelection method.

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

close(): void

Closes the dropDown list.


Invoke the close method.

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

Try a demo showcasing the close method.

dataBind(): void

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


Invoke the dataBind method.

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

getItem( value: string): HTMLElement

Returns an item instance from the dropDown list.

Arguments

valuestring

The value of an item from the drop down list.

ReturnsHTMLElement

Invoke the getItem method.

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

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

Inserts a new item at a specified position.

Arguments

positionnumber

The position where the item must be inserted.

valueany

The value of the new item.


Invoke the insert method.

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

Try a demo showcasing the insert method.

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

Arguments

nodeNode

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

referenceNodeNode | null

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

ReturnsNode

open(): void

Opens the dropDown list.


Invoke the open method.

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

Try a demo showcasing the open method.

removeAt( position: number): void

Removes an item at a specified position.

Arguments

positionnumber

The position of the removed item.


Invoke the removeAt method.

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

Try a demo showcasing the removeAt method.

removeChild( node: Node): T

Arguments

nodeNode

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

ReturnsNode

select( item: string | HTMLElement): void

Selects an item from the dropDown list.

Arguments

itemstring | HTMLElement

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


Invoke the select method.

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

unselect( item: string | HTMLElement): void

Unselects an item from the dropDown list.

Arguments

itemstring | HTMLElement

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


Invoke the unselect method.

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

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

Updates an item from the dropDown list.

Arguments

positionnumber

The position where the item must be updated.

valueany

The value of the updated item.


Invoke the update method.

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

Try a demo showcasing the update method.

CSS Variables

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

Default value

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

smartDropDownList, smartComboBox default width

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

Default value

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

smartDropDownList, smartComboBox default height

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

Default value

"initial"

smartDropDownList drop down width

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

Default value

"auto"

smartDropDownList drop down height


ListItem

Defines a list item for ListBox, ComboBox, DropDownList.

Selector

smart-list-item

Properties

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

""