ListBox JAVASCRIPT UI Component API

ListBox Javascript API

Class

ListBox
ListItem
ListItemsGroup

ListBox

ListBox allows the user to select one or more items from a list.

Selector

smart-list-box

Properties

AallowDragEnables or disables the ability to drag list items out of the List box. Disabled items cannot be dragged.
AallowDropEnables or disables the ability to drop list items inside the target List box.
AalternationCountDetermines the number of color alternations in rows.
AalternationEndDetermines the ending index of color alternations in rows.
AalternationStartDetermines the starting index of color alternations in rows
AanimationSets or gets the animation mode. Animation is disabled when the property is set to 'none'
AautoSortEnables or disables auto sorting. If sorted is enabled, but autoSort is false, the element will not be re-sorted automatically.
DdataSourceDetermines the data source that will be loaded to the ListBox. 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 list box.
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.
DdragFeedbackFormatFunctionA callback function for customizing the HTML of the drag feedback. It receives one parameter - the currently dragged item.
DdragOffsetDetermines the offset of the drag feedback element from the mouse cursor when dragging an item. The first member of the array is the horizontal offset and the second one - the vertical offset.
DdropActionDetermines what happens when an item is dropped.
EeditableDetermines if list items can be edited or not. If enabled, items can be edited by double clicking on a target item ( that is not disabled ) or pressing the F2 key on the keyboard.
FfilterableDetermines whether list items can be filtered or not. If enable a filter input appears at the top of the list box.
FfilterCallbackA callback that should return a condition that will be used for custom item filtering. Used in conjunction with filterMode 'custom'
FfilterModeDetermines the filtering mode.
FfilterInputPlaceholderDetermines the placeholder for the filter input field.
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.
HhorizontalScrollBarVisibilityDetermines the visibility of the horizontal Scroll bar.
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 List box is focused starts the incremental search.
IitemHeightSets the height for all list box items. Used only when virtualization is enabled.
IitemMeasureModeDetermines the item width measuring algorithm.
IitemsA getter that returns an array of all ListBox items.
IitemTemplateA string that represents the id of an HTMLTemplateElement inside the DOM or a reference to the template itself. It's used to set a custom template for the list items.
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 language.
NnameSets or gets the name attribute for the element. Name is used when submiting HTML forms.
PplaceholderDetermines the placeholder that will be shown when the List box is empty.
RreadonlySets or gets the readonly property. If the element is readonly, users cannot interact with it.
RrightToLeftSets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.
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 depending on the selection mode.
SselectionChangeActionDetermines when listbox selection is achieved - on 'press' or 'release'.
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.
TtopVisibleIndexEnsures the item with the target index is in view as the first (top) item in the list box.
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 for the ListBox. 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

BbindingCompleteThis event is triggered when listbox binding is completed.
CchangeThis event is triggered when selection is changed.
DdragEndThis event is triggered when an item is dropped. The dragging operation can be canceled by calling event.preventDefault() in the event handler function.
DdraggingThis event is triggered when a List item is being dragged.
DdragStartThis event is triggered when an item is dragged. The dragging operation can be canceled by calling event.preventDefault() in the event handler function.
IitemClickThis event is triggered when an item is clicked.
IitemLabelChangeThis event is triggered when an item has been edited.
SscrollBottomReachedThis event is triggered when user scrolls to the end of the list.
SscrollTopReachedThis event is triggered when user scrolls to the beginning of the list.
SswipeleftThis event is triggered when the user swipes to the left, inside the listBox.
SswiperightThis event is triggered when the user swipes to the right, inside the listBox.

Methods

AaddAdds a new item(s).
CclearItemsRemoves all items from the listBox.
CclearSelectionUnselects all items.
DdataBindPerforms a data bind. This can be used to refresh the data source.
EensureVisibleEnsures the target item is visible by scrolling to it.
GgetItemReturns an item instance from the listBox.
GgetItemsReturns an array of ListBox items.
IinsertInserts a new item at a specified index.
RremoveAtRemoves an item at a specified index.
SselectSelects an item from the listBox.
UunselectUnselects an item from the listBox.
UupdateUpdates an item from the listBox.

Properties

allowDragboolean

Enables or disables the ability to drag list items out of the List box. Disabled items cannot be dragged.

Default value

false
Try a demo showcasing the allowDrag property.

Example

Set the allowDrag property. 

 <smart-list-box allow-drag></smart-list-box>

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

 const listbox = document.querySelector('smart-list-box');
 listbox.allowDrag = false;

Get the allowDrag property. 

 const listbox = document.querySelector('smart-list-box');
 let allowDrag = listbox.allowDrag;

allowDropboolean

Enables or disables the ability to drop list items inside the target List box.

Default value

false
Try a demo showcasing the allowDrop property.

Example

Set the allowDrop property. 

 <smart-list-box allow-drop></smart-list-box>

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

 const listbox = document.querySelector('smart-list-box');
 listbox.allowDrop = false;

Get the allowDrop property. 

 const listbox = document.querySelector('smart-list-box');
 let allowDrop = listbox.allowDrop;

alternationCountnumber

Determines the number of color alternations in rows.

Default value

0

Example

Set the alternationCount property. 

 <smart-list-box alternation-count='true'></smart-list-box>

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

 const listbox = document.querySelector('smart-list-box');
 listbox.alternationCount = false;

Get the alternationCount property. 

 const listbox = document.querySelector('smart-list-box');
 let alternationCount = listbox.alternationCount;

alternationEndnumber

Determines the ending index of color alternations in rows.

Default value

0

Example

Set the alternationEnd property. 

 <smart-list-box alternation-end='true'></smart-list-box>

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

 const listbox = document.querySelector('smart-list-box');
 listbox.alternationEnd = false;

Get the alternationEnd property. 

 const listbox = document.querySelector('smart-list-box');
 let alternationEnd = listbox.alternationEnd;

alternationStartnumber

Determines the starting index of color alternations in rows

Default value

0

Example

Set the alternationStart property. 

 <smart-list-box alternation-start='true'></smart-list-box>

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

 const listbox = document.querySelector('smart-list-box');
 listbox.alternationStart = false;

Get the alternationStart property. 

 const listbox = document.querySelector('smart-list-box');
 let alternationStart = listbox.alternationStart;

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

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

Allowed Values

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

Default value

"advanced"

Example

Set the animation property. 

 <smart-list-box animation='none'></smart-list-box>

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

 const listbox = document.querySelector('smart-list-box');
 listbox.animation = 'simple';

Get the animation property. 

 const listbox = document.querySelector('smart-list-box');
 let animation = listbox.animation;

autoSortboolean

Enables or disables auto sorting. If sorted is enabled, but autoSort is false, the element will not be re-sorted automatically.

Default value

true

Example

Set the autoSort property. 

 <smart-list-box auto-sort></smart-list-box>

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

 const listbox = document.querySelector('smart-list-box');
 listbox.autoSort = false;

Get the autoSort property. 

 const listbox = document.querySelector('smart-list-box');
 let autoSort = listbox.autoSort;

dataSourceany

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

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

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

Get the dataSource property. 

 const listbox = document.querySelector('smart-list-box');
 let dataSource = listbox.dataSource;

disabledboolean

Enables or disables the list box.

Default value

false

Example

Set the disabled property. 

 <smart-list-box disabled></smart-list-box>

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

 const listbox = document.querySelector('smart-list-box');
 listbox.disabled = false;

Get the disabled property. 

 const listbox = document.querySelector('smart-list-box');
 let disabled = listbox.disabled;

displayLoadingIndicatorboolean

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

Default value

false

Example

Set the displayLoadingIndicator property. 

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

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

 const listbox = document.querySelector('smart-list-box');
 listbox.displayLoadingIndicator = false;

Get the displayLoadingIndicator property. 

 const listbox = document.querySelector('smart-list-box');
 let displayLoadingIndicator = listbox.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-list-box display-member='label'></smart-list-box>

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

 const listbox = document.querySelector('smart-list-box');
 listbox.displayMember = 'name';

Get the displayMember property. 

 const listbox = document.querySelector('smart-list-box');
 let displayMember = listbox.displayMember;

dragFeedbackFormatFunctionfunction | null

A callback function for customizing the HTML of the drag feedback. It receives one parameter - the currently dragged item.

Example

Set the dragFeedbackFormatFunction property. 

 <smart-list-box drag-feedback-format-function='dragFeedbackFormatFunction'></smart-list-box>

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

 const listbox = document.querySelector('smart-list-box');
 listbox.dragFeedbackFormatFunction = function dragFeedbackFormatFunction(draggedItem) { return 'Dragging: ' + draggedItem.label; };

Get the dragFeedbackFormatFunction property. 

 const listbox = document.querySelector('smart-list-box');
 let dragFeedbackFormatFunction = listbox.dragFeedbackFormatFunction;

dragOffsetnumber[]

Determines the offset of the drag feedback element from the mouse cursor when dragging an item. The first member of the array is the horizontal offset and the second one - the vertical offset.

Example

Set the dragOffset property. 

 <smart-list-box drag-offset='[0, 0]'></smart-list-box>

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

 const listbox = document.querySelector('smart-list-box');
 listbox.dragOffset = [-60, 20];

Get the dragOffset property. 

 const listbox = document.querySelector('smart-list-box');
 let dragOffset = listbox.dragOffset;

dropAction"copy" | "move" | "none"

Determines what happens when an item is dropped.

Allowed Values

  • "copy" - Creates a copy of the dragged item and inserts it instead of the original. The original item retains it's place inside the original ListBox.
  • "move" - Moves the dragged item to the new host.
  • "none" - Nothing changes when the dragged item is dropped.

Default value

"move"

Example

Set the dropAction property. 

 <smart-list-box drop-action='copy'></smart-list-box>

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

 const listbox = document.querySelector('smart-list-box');
 listbox.dropAction = 'move';

Get the dropAction property. 

 const listbox = document.querySelector('smart-list-box');
 let dropAction = listbox.dropAction;

editableboolean

Determines if list items can be edited or not. If enabled, items can be edited by double clicking on a target item ( that is not disabled ) or pressing the F2 key on the keyboard.

Default value

false
Try a demo showcasing the editable property.

Example

Set the editable property. 

 <smart-list-box editable></smart-list-box>

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

 const listbox = document.querySelector('smart-list-box');
 listbox.editable = false;

Get the editable property. 

 const listbox = document.querySelector('smart-list-box');
 let editable = listbox.editable;

filterableboolean

Determines whether list items can be filtered or not. If enable a filter input appears at the top of the list box.

Default value

false
Try a demo showcasing the filterable property.

Example

Set the filterable property. 

 <smart-list-box filterable></smart-list-box>

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

 const listbox = document.querySelector('smart-list-box');
 listbox.filterable = false;

Get the filterable property. 

 const listbox = document.querySelector('smart-list-box');
 let filterable = listbox.filterable;

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-list-box filter-callback='function(item, searchQuery) { return item.value.toLowerCase() === searchQuery.toLowerCase() }'></smart-list-box>

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

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

Get the filterCallback property. 

 const listbox = document.querySelector('smart-list-box');
 let filterCallback = listbox.filterCallback;

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

Determines the filtering mode.

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)
  • "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)
  • "custom" - filtering is applied according to the callback function filterCallback

Default value

"containsIgnoreCase"

Example

Set the filterMode property. 

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

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

 const listbox = document.querySelector('smart-list-box');
 listbox.filterMode = 'equals';

Get the filterMode property. 

 const listbox = document.querySelector('smart-list-box');
 let filterMode = listbox.filterMode;

filterInputPlaceholderstring

Determines the placeholder for the filter input field.

Default value

""

Example

Set the filterInputPlaceholder property. 

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

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

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

Get the filterInputPlaceholder property. 

 const listbox = document.querySelector('smart-list-box');
 let filterInputPlaceholder = listbox.filterInputPlaceholder;

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

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

 const listbox = document.querySelector('smart-list-box');
 listbox.grouped = false;

Get the grouped property. 

 const listbox = document.querySelector('smart-list-box');
 let grouped = listbox.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-list-box group-member='group'></smart-list-box>

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

 const listbox = document.querySelector('smart-list-box');
 listbox.groupMember = section;

Get the groupMember property. 

 const listbox = document.querySelector('smart-list-box');
 let groupMember = listbox.groupMember;

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

Determines the visibility of the horizontal 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 horizontalScrollBarVisibility property. 

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

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

 const listbox = document.querySelector('smart-list-box');
 listbox.horizontalScrollBarVisibility = 'hidden';

Get the horizontalScrollBarVisibility property. 

 const listbox = document.querySelector('smart-list-box');
 let horizontalScrollBarVisibility = listbox.horizontalScrollBarVisibility;

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

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

 const listbox = document.querySelector('smart-list-box');
 listbox.incrementalSearchDelay = mygroup;

Get the incrementalSearchDelay property. 

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

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

 const listbox = document.querySelector('smart-list-box');
 listbox.incrementalSearchMode = 'endsWith';

Get the incrementalSearchMode property. 

 const listbox = document.querySelector('smart-list-box');
 let incrementalSearchMode = listbox.incrementalSearchMode;

itemHeightnumber

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

Try a demo showcasing the itemHeight property.

Example

Set the itemHeight property. 

 <smart-list-box item-height='50'></smart-list-box>

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

 const listbox = document.querySelector('smart-list-box');
 listbox.itemHeight = 80;

Get the itemHeight property. 

 const listbox = document.querySelector('smart-list-box');
 let itemHeight = listbox.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-list-box item-measure-mode='precise'></smart-list-box>

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

 const listbox = document.querySelector('smart-list-box');
 listbox.itemMeasureMode = 'auto';

Get the itemMeasureMode property. 

 const listbox = document.querySelector('smart-list-box');
 let itemMeasureMode = listbox.itemMeasureMode;

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

A getter that returns an array of all ListBox items.

Default value

null

Properties

labelstring | null

The label of the list item.

Default value

""

Get the label property. 

 const listbox = document.querySelector('smart-list-box');
 let label = listbox.items[0].label;

valuestring | null

The value of the list item.

Default value

""

Get the value property. 

 const listbox = document.querySelector('smart-list-box');
 let value = listbox.items[0].value;

itemTemplateany

A string that represents the id of an HTMLTemplateElement inside the DOM or a reference to the template itself. It's used to set a custom template for the list items.

Try a demo showcasing the itemTemplate property.

Example

Set the itemTemplate property. 

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

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

 const listbox = document.querySelector('smart-list-box');
 listbox.itemTemplate = 'templateB';

Get the itemTemplate property. 

 const listbox = document.querySelector('smart-list-box');
 let itemTemplate = listbox.itemTemplate;

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

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

 const listbox = document.querySelector('smart-list-box');
 listbox.loadingIndicatorPlaceholder = 'LOADING...';

Get the loadingIndicatorPlaceholder property. 

 const listbox = document.querySelector('smart-list-box');
 let loadingIndicatorPlaceholder = listbox.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 box.
  • "center" - Positions the loading indicator at the center of the List box.
  • "top" - Positions the loading indicator at the bottom of the List box.

Default value

"center"

Example

Set the loadingIndicatorPosition property. 

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

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

 const listbox = document.querySelector('smart-list-box');
 listbox.loadingIndicatorPosition = 'top';

Get the loadingIndicatorPosition property. 

 const listbox = document.querySelector('smart-list-box');
 let loadingIndicatorPosition = listbox.loadingIndicatorPosition;

localestring

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

Default value

"en"

Example

Set the locale property. 

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

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

 const listbox = document.querySelector('smart-list-box');
 listbox.locale = 'fr';

Get the locale property. 

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

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

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

Get the localizeFormatFunction property. 

 const listbox = document.querySelector('smart-list-box');
 let localizeFormatFunction = listbox.localizeFormatFunction;

messagesobject

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

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

"overridingProperties": "{{elementType}}: Overriding properties {{property1}} and {{property2}} applied. The '{{property1}}' property is used by default.",

"invalidIndex": "{{elementType}}: '{{method}}' method accepts an index of type number or an Array of numbers.",

"indexOutOfBound": "{{elementType}}: Out of bound index/indexes in '{{method}}' method.",

"invalidItem": "{{elementType}}: '{{method}}' method accepts an object or an array of objects as it's second parameter.",

"invalidSettings": "{{elementType}}: '{{method}}' method accepts a string or an object as it's second parameter."

}

Example

Set the messages property. 

 <smart-list-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.","overridingProperties":"{{elementType}}: Uberschreiben der Eigenschaften {{property1}} und {{property2}} angewendet. Die Eigenschaft '{{property1}}' wird standardmassig verwendet.","invalidIndex":"{{elementType}}: '{{method}}' Die Methode akzeptiert einen Index der Typennummer oder ein Zahlenfeld.","indexOutOfBound":"{{elementType}}: ncht gebundener Index / Indizes in Methode '{{method}}'.","invalidItem":"{{elementType}}: '{{method}}' Die Methode akzeptiert ein Objekt oder ein Array von Objekten als zweiten Parameter.","invalidSettings":"{{elementType}}: '{{method}}' Die Methode akzeptiert einen string oder ein Objekt als zweiten Parameter."}}'></smart-list-box>

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

 const listbox = document.querySelector('smart-list-box');
 listbox.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.","overridingProperties":"{{elementType}}: Overriding properties {{property1}} and {{property2}} applied. The '{{property1}}' property is used by default.","invalidIndex":"{{elementType}}: '{{method}}' method accepts an index of type number or an Array of numbers.","indexOutOfBound":"{{elementType}}: Out of bound index/indexes in '{{method}}' method.","invalidItem":"{{elementType}}: '{{method}}' method accepts an object or an array of objects as it's second parameter.","invalidSettings":"{{elementType}}: '{{method}}' method accepts a string or an object as it's second parameter."}};

Get the messages property. 

 const listbox = document.querySelector('smart-list-box');
 let messages = listbox.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-list-box name='Name'></smart-list-box>

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

 const listbox = document.querySelector('smart-list-box');
 listbox.name = 'New Name';

Get the name property. 

 const listbox = document.querySelector('smart-list-box');
 let name = listbox.name;

placeholderstring

Determines the placeholder that will be shown when the List box is empty.

Default value

"No Items"

Example

Set the placeholder property. 

 <smart-list-box placeholder='Placeholder'></smart-list-box>

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

 const listbox = document.querySelector('smart-list-box');
 listbox.placeholder = 'New Placeholder';

Get the placeholder property. 

 const listbox = document.querySelector('smart-list-box');
 let placeholder = listbox.placeholder;

readonlyboolean

Sets or gets the readonly property. If the element is readonly, users cannot interact with it.

Default value

false

Example

Set the readonly property. 

 <smart-list-box readonly></smart-list-box>

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

 const listbox = document.querySelector('smart-list-box');
 listbox.readonly = true;

Get the readonly property. 

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

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

 const listbox = document.querySelector('smart-list-box');
 listbox.rightToLeft = true;

Get the rightToLeft property. 

 const listbox = document.querySelector('smart-list-box');
 let rightToLeft = listbox.rightToLeft;

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-list-box selected-indexes='[1,2,3]'></smart-list-box>

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

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

Get the selectedIndexes property. 

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

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

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

Get the selectedValues property. 

 const listbox = document.querySelector('smart-list-box');
 let selectedValues = listbox.selectedValues;

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

Determines how many items can be selected depending on the selection mode.

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 List box. One, many or zero items can be selected.
  • "radioButton" - A radio button appears next to every List item inside the List box. Only one item can be selected or one item per group if grouped is enabled.

Default value

"oneOrManyExtended"

Example

Set the selectionMode property. 

 <smart-list-box selection-mode='zeroOrMany'></smart-list-box>

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

 const listbox = document.querySelector('smart-list-box');
 listbox.selectionMode = 'zeroOrOne';

Get the selectionMode property. 

 const listbox = document.querySelector('smart-list-box');
 let selectionMode = listbox.selectionMode;

selectionChangeAction"press" | "release"

Determines when listbox selection is achieved - on 'press' or 'release'.

Default value

"release"

Example

Set the selectionChangeAction property. 

 <smart-list-box selection-change-action='press'></smart-list-box>

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

 const listbox = document.querySelector('smart-list-box');
 listbox.selectionChangeAction = 'release';

Get the selectionChangeAction property. 

 const listbox = document.querySelector('smart-list-box');
 let selectionChangeAction = listbox.selectionChangeAction;

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-list-box sorted></smart-list-box>

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

 const listbox = document.querySelector('smart-list-box');
 listbox.sorted = false;

Get the sorted property. 

 const listbox = document.querySelector('smart-list-box');
 let sorted = listbox.sorted;

sortDirectionstring

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

Default value

"asc"

Example

Set the sortDirection property. 

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

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

 const listbox = document.querySelector('smart-list-box');
 listbox.sortDirection = 'asc';

Get the sortDirection property. 

 const listbox = document.querySelector('smart-list-box');
 let sortDirection = listbox.sortDirection;

themestring

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

Default value

""

Example

Set the theme property. 

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

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

 const listbox = document.querySelector('smart-list-box');
 listbox.theme = 'red';

Get the theme property. 

 const listbox = document.querySelector('smart-list-box');
 let theme = listbox.theme;

topVisibleIndexnumber

Ensures the item with the target index is in view as the first (top) item in the list box.

Default value

-1

Example

Set the topVisibleIndex property. 

 <smart-list-box top-visible-index='20'></smart-list-box>

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

 const listbox = document.querySelector('smart-list-box');
 listbox.topVisibleIndex = 2;

Get the topVisibleIndex property. 

 const listbox = document.querySelector('smart-list-box');
 let topVisibleIndex = listbox.topVisibleIndex;

unfocusableboolean

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

Default value

false

Example

Set the unfocusable property. 

 <smart-list-box unfocusable></smart-list-box>

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

 const listbox = document.querySelector('smart-list-box');
 listbox.unfocusable = false;

Get the unfocusable property. 

 const listbox = document.querySelector('smart-list-box');
 let unfocusable = listbox.unfocusable;

valueany

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

Example

Set the value property. 

 <smart-list-box value='1'></smart-list-box>

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

 const listbox = document.querySelector('smart-list-box');
 listbox.value = 2;

Get the value property. 

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

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

 const listbox = document.querySelector('smart-list-box');
 listbox.valueMember = 'newValue';

Get the valueMember property. 

 const listbox = document.querySelector('smart-list-box');
 let valueMember = listbox.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-list-box vertical-scroll-bar-visibility='hidden'></smart-list-box>

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

 const listbox = document.querySelector('smart-list-box');
 listbox.verticalScrollBarVisibility = 'visible';

Get the verticalScrollBarVisibility property. 

 const listbox = document.querySelector('smart-list-box');
 let verticalScrollBarVisibility = listbox.verticalScrollBarVisibility;

virtualizedboolean

Determines weather or not Virtualization is used for the ListBox. 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
Try a demo showcasing the virtualized property.

Example

Set the virtualized property. 

 <smart-list-box virtualized></smart-list-box>

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

 const listbox = document.querySelector('smart-list-box');
 listbox.virtualized = false;

Get the virtualized property. 

 const listbox = document.querySelector('smart-list-box');
 let virtualized = listbox.virtualized;

Events

bindingCompleteCustomEvent

This event is triggered when listbox binding is completed.

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

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

const listbox = document.querySelector('smart-list-box');
listbox.addEventListener('bindingComplete', function (event) {
	// event handling code goes here.
})

changeCustomEvent

This event is triggered when 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 listbox = document.querySelector('smart-list-box');
listbox.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.
})

dragEndCustomEvent

This event is triggered when an item is dropped. The dragging operation can be canceled by calling event.preventDefault() in the event handler function.

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

Arguments

evCustomEvent
ev.detailObject
ev.detail.container - The List box that an item was dragged to.
ev.detail.data - An object that contains data about the dragging operation like start position, start time, etc.
ev.detail.item - The List item that was dragged.
ev.detail.originalEvent - That original event that was fired.
ev.detail.previousContainer - The List box that an item was dragged from.
ev.detail.target - The event target.

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

const listbox = document.querySelector('smart-list-box');
listbox.addEventListener('dragEnd', function (event) {
    const detail = event.detail,
        container = detail.container,
        data = detail.data,
        item = detail.item,
        originalEvent = detail.originalEvent,
        previousContainer = detail.previousContainer,
        target = detail.target;

	// event handling code goes here.
})

draggingCustomEvent

This event is triggered when a List item is being dragged.

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

Arguments

evCustomEvent
ev.detailObject
ev.detail.data - An object that contains data about the dragging operation like start position, start time, etc.
ev.detail.item - The List item that is being dragged. This is the item that has been clicked when initiating the drag operation
ev.detail.originalEvent - The original event that initiates the dragging operation.

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

const listbox = document.querySelector('smart-list-box');
listbox.addEventListener('dragging', function (event) {
    const detail = event.detail,
        data = detail.data,
        item = detail.item,
        originalEvent = detail.originalEvent;

	// event handling code goes here.
})

dragStartCustomEvent

This event is triggered when an item is dragged. The dragging operation can be canceled by calling event.preventDefault() in the event handler function.

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

Arguments

evCustomEvent
ev.detailObject
ev.detail.container - The List box that an item was dragged to.
ev.detail.data - An object that contains data about the dragging oepration like start position, start time, etc.
ev.detail.item - The List item that was dragged.
ev.detail.originalEvent - That original event that was fired.
ev.detail.previousContainer - The List box that an item was dragged from.
ev.detail.target - The event target.

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.

Try a demo showcasing the dragStart event.

Example

Set up the event handler of dragStart event. 

const listbox = document.querySelector('smart-list-box');
listbox.addEventListener('dragStart', function (event) {
    const detail = event.detail,
        container = detail.container,
        data = detail.data,
        item = detail.item,
        originalEvent = detail.originalEvent,
        previousContainer = detail.previousContainer,
        target = detail.target;

	// 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 listbox = document.querySelector('smart-list-box');
listbox.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.
})

itemLabelChangeCustomEvent

This event is triggered when an item has been edited.

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

Arguments

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

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

const listbox = document.querySelector('smart-list-box');
listbox.addEventListener('itemLabelChange', function (event) {
    const detail = event.detail,
        selected = detail.selected,
        disabled = detail.disabled,
        index = detail.index,
        label = detail.label,
        value = detail.value;

	// event handling code goes here.
})

scrollBottomReachedCustomEvent

This event is triggered when user scrolls to the end of the 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.

Try a demo showcasing the scrollBottomReached event.

Example

Set up the event handler of scrollBottomReached event. 

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

scrollTopReachedCustomEvent

This event is triggered when user scrolls to the beginning of the 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 listbox = document.querySelector('smart-list-box');
listbox.addEventListener('scrollTopReached', function (event) {
	// event handling code goes here.
})

swipeleftCustomEvent

This event is triggered when the user swipes to the left, inside the listBox.

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

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

const listbox = document.querySelector('smart-list-box');
listbox.addEventListener('swipeleft', function (event) {
	// event handling code goes here.
})

swiperightCustomEvent

This event is triggered when the user swipes to the right, inside the listBox.

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

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

const listbox = document.querySelector('smart-list-box');
listbox.addEventListener('swiperight', 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 listbox = document.querySelector('smart-list-box');
listbox.add("'New item'");

Try a demo showcasing the add method.

clearItems(): void

Removes all items from the listBox.


Invoke the clearItems method.

const listbox = document.querySelector('smart-list-box');
listbox.clearItems();

Try a demo showcasing the clearItems method.

clearSelection(): void

Unselects all items.


Invoke the clearSelection method.

const listbox = document.querySelector('smart-list-box');
listbox.clearSelection();

dataBind(): void

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


Invoke the dataBind method.

const listbox = document.querySelector('smart-list-box');
listbox.dataBind();

Try a demo showcasing the dataBind method.

ensureVisible( item: HTMLElement | string): void

Ensures the target 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 listbox = document.querySelector('smart-list-box');
listbox.ensureVisible("'item1'");

getItem( value: string): HTMLElement

Returns an item instance from the listBox.

Arguments

valuestring

The value of an item from the listBox.

ReturnsHTMLElement

Invoke the getItem method.

const listbox = document.querySelector('smart-list-box');
const result = listbox.getItem("First");

getItems(): {label: string, value: string}[]

Returns an array of ListBox items.

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

Invoke the getItems method.

const listbox = document.querySelector('smart-list-box');
const result = listbox.getItems();

insert( index: number, items: any): void

Inserts a new item at a specified index.

Arguments

indexnumber

The index where the item must be inserted.

itemsany

A single item/definition or an array of List Items/definitions of list items to be inserted. The format of the item definitions is the same as the format of the dataSource property.


Invoke the insert method.

const listbox = document.querySelector('smart-list-box');
listbox.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

removeAt( index: number): void

Removes an item at a specified index.

Arguments

indexnumber

The index of the removed item.


Invoke the removeAt method.

const listbox = document.querySelector('smart-list-box');
listbox.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 | number | HTMLElement): void

Selects an item from the listBox.

Arguments

itemstring | number | HTMLElement

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


Invoke the select method.

const listbox = document.querySelector('smart-list-box');
listbox.select("'First Item'");

unselect( item: string | HTMLElement): void

Unselects an item from the listBox.

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 listbox = document.querySelector('smart-list-box');
listbox.unselect("'First Item'");

update( index: number, details: any): void

Updates an item from the listBox.

Arguments

indexnumber

The index of the item that is going to be updated.

detailsany

An object that contains the properties and their new values for the List item that should be updated. For example, label, value or selected attributes.


Invoke the update method.

const listbox = document.querySelector('smart-list-box');
listbox.update(5,"'Updated item'");

Try a demo showcasing the update method.

CSS Variables

--smart-list-box-default-widthvar()

Default value

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

smartListBox default width

--smart-list-box-default-heightvar()

Default value

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

smartListBox default height

--smart-list-item-group-header-text-transformvar()

Default value

"uppercase"

smartListBox item group header text transform

--smart-list-item-horizontal-offsetvar()

Default value

"3px"

Defines list item's horizontal offset.

--smart-list-item-vertical-offsetvar()

Default value

"3px"

Defines list item's vertical offset.

--smart-list-item-heightvar()

Default value

"36px"

smartListBox item height

--smart-list-item-check-box-radiusvar()

Default value

"2px"

smartListBox checkbox radius

--smart-list-item-label-paddingvar()

Default value

"0"

smartListBox item label padding

--smart-list-item-label-border-radiusvar()

Default value

"0"

smartListBox item label border radius


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

""