ListBox API Reference

dataSource any

Determines the data source that will be loaded to the ListBox.

Code examples

Set the dataSource property.

 let listBox = document.querySelector('jqx-list-box');

 listBox.dataSource = ["new item 1", "new item 2"];

Get the dataSource property.

 let listBox = document.querySelector('jqx-list-box');

 let dataSource = listBox.dataSource;

disabled boolean false

Enables or disables the list box.

Code examples

Set the disabled property.

 let listBox = document.querySelector('jqx-list-box');

 listBox.disabled = false;

Get the disabled property.

 let listBox = document.querySelector('jqx-list-box');

 let disabled = listBox.disabled;

displayLoadingIndicator boolean false

Displays or hidess the loading indicator

Code examples

Set the displayLoadingIndicator property.

 let listBox = document.querySelector('jqx-list-box');

 listBox.displayLoadingIndicator = false;

Get the displayLoadingIndicator property.

 let listBox = document.querySelector('jqx-list-box');

 let displayLoadingIndicator = listBox.displayLoadingIndicator;

displayMember string ""

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.

Code examples

Set the displayMember property.

 let listBox = document.querySelector('jqx-list-box');

 listBox.displayMember = 'name';

Get the displayMember property.

 let listBox = document.querySelector('jqx-list-box');

 let displayMember = listBox.displayMember;

dropAction string move

Determines what happens when an item is dropped. Possible values: 'copy', 'move', 'none'.

Code examples

Set the dropAction property.

 let listBox = document.querySelector('jqx-list-box');

 listBox.dropAction = 'move';

Get the dropAction property.

 let listBox = document.querySelector('jqx-list-box');

 let dropAction = listBox.dropAction;

filterable boolean false

Determines whether the Filtering is enabled.

Code examples

Set the filterable property.

 let listBox = document.querySelector('jqx-list-box');

 listBox.filterable = false;

Get the filterable property.

 let listBox = document.querySelector('jqx-list-box');

 let filterable = listBox.filterable;

filterMode string startsWithIgnoreCase

Determines the filtering mode. Possible values: 'none', 'contains', 'containsIgnoreCase', 'equals', 'equalsIgnoreCase', 'startsWith', 'startsWithIgnoreCase', 'endsWith', 'endsWithIgnoreCase', 'matchMetaData'.

Code examples

Set the filterMode property.

 let listBox = document.querySelector('jqx-list-box');

 listBox.filterMode = 'equals';

Get the filterMode property.

 let listBox = document.querySelector('jqx-list-box');

 let filterMode = listBox.filterMode;

filterInputPlaceholder string

Determines the placeholder for the filter input field.

Code examples

Set the filterInputPlaceholder property.

 let listBox = document.querySelector('jqx-list-box');

 listBox.filterInputPlaceholder = 'Awaiting entry:';

Get the filterInputPlaceholder property.

 let listBox = document.querySelector('jqx-list-box');

 let filterInputPlaceholder = listBox.filterInputPlaceholder;

grouped boolean false

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

Code examples

Set the grouped property.

 let listBox = document.querySelector('jqx-list-box');

 listBox.grouped = false;

Get the grouped property.

 let listBox = document.querySelector('jqx-list-box');

 let grouped = listBox.grouped;

groupMember string null

Sets or gets the groupMember. If it's not set, by default is used 'group' property of the source object.

Code examples

Set the groupMember property.

 let listBox = document.querySelector('jqx-list-box');

 listBox.groupMember = 'section';

Get the groupMember property.

 let listBox = document.querySelector('jqx-list-box');

 let groupMember = listBox.groupMember;

incrementalSearchDelay number 700

Sets ot gets the incrementalSearchDelay property. The incrementalSearchDelay specifies the time-interval in milliseconds after which the previous search string is deleted. The timer starts when you stop typing.

Code examples

Set the incrementalSearchDelay property.

 let listBox = document.querySelector('jqx-list-box');

 listBox.incrementalSearchDelay = mygroup;

Get the incrementalSearchDelay property.

 let listBox = document.querySelector('jqx-list-box');

 let incrementalSearchDelay = listBox.incrementalSearchDelay;

incrementalSearchMode string startsWith

Sets ot gets the mode of the incremental search mode. Possible values: 'none', 'contains', 'containsIgnoreCase', 'equals', 'equalsIgnoreCase', 'startsWith', 'startsWithIgnoreCase', 'endsWith', 'endsWithIgnoreCase', 'matchMetaData'.

Code examples

Set the incrementalSearchMode property.

 let listBox = document.querySelector('jqx-list-box');

 listBox.incrementalSearchMode = 'endsWith';

Get the incrementalSearchMode property.

 let listBox = document.querySelector('jqx-list-box');

 let incrementalSearchMode = listBox.incrementalSearchMode;

itemTemplate string null

The itemTemplate property is a string that represents the id of an HTMLTemplateElement in the DOM. It's used to load list items from the HTMLTemplateElement.

Code examples

Set the itemTemplate property.

 let listBox = document.querySelector('jqx-list-box');

 listBox.itemTemplate = 'templateB';

Get the itemTemplate property.

 let listBox = document.querySelector('jqx-list-box');

 let itemTemplate = listBox.itemTemplate;

loadingIndicatorPlaceholder string Loading...

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.

Code examples

Set the loadingIndicatorPlaceholder property.

 let listBox = document.querySelector('jqx-list-box');

 listBox.loadingIndicatorPlaceholder = 'LOADING...';

Get the loadingIndicatorPlaceholder property.

 let listBox = document.querySelector('jqx-list-box');

 let loadingIndicatorPlaceholder = listBox.loadingIndicatorPlaceholder;

loadingIndicatorPosition string center

The position of the loading indicator. Possible values: 'bottom', 'center', 'top'.

Code examples

Set the loadingIndicatorPosition property.

 let listBox = document.querySelector('jqx-list-box');

 listBox.loadingIndicatorPosition = 'top';

Get the loadingIndicatorPosition property.

 let listBox = document.querySelector('jqx-list-box');

 let loadingIndicatorPosition = listBox.loadingIndicatorPosition;

messages object { "en": { "missingReference": "{{elementType}}: Missing reference to {{files}}.", "overridingProperties": "{{elementType}}: Overriding properties {{property1}} and {{property2}} applied. {{property1}} is applied.", } }

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

Code examples

Set the messages property.

 let listBox = document.querySelector('jqx-list-box');

 listBox.messages = { "de": { "missingReference": "{{elementType}}: Fehlende Bezugnahme auf {{files}}.", "overridingProperties": "{{elementType}}: �bergeordnete Eigenschaften {{property1}} und {{property2}} wurden angewendet. {{property1}} angewendet wird." } };

Get the messages property.

 let listBox = document.querySelector('jqx-list-box');

 let messages = listBox.messages;

placeholder string No Items

Determines the widget's place holder, displayed when the widget is empty.

Code examples

Set the placeholder property.

 let listBox = document.querySelector('jqx-list-box');

 listBox.placeholder = 'New Placeholder';

Get the placeholder property.

 let listBox = document.querySelector('jqx-list-box');

 let placeholder = listBox.placeholder;

reorder boolean false

Determines weather or not reordering of items by dragging is enabled.

Code examples

Set the reorder property.

 let listBox = document.querySelector('jqx-list-box');

 listBox.reorder = false;

Get the reorder property.

 let listBox = document.querySelector('jqx-list-box');

 let reorder = listBox.reorder;

selectedIndexes array

Sets or gets elected indexes.

Code examples

Set the selectedIndexes property.

 let listBox = document.querySelector('jqx-list-box');

 listBox.selectedIndexes = ["item 2"];

Get the selectedIndexes property.

 let listBox = document.querySelector('jqx-list-box');

 let selectedIndexes = listBox.selectedIndexes;

selectedValues array

Sets or gets elected indexes.

Code examples

Set the selectedValues property.

 let listBox = document.querySelector('jqx-list-box');

 listBox.selectedValues = [4,5,6];

Get the selectedValues property.

 let listBox = document.querySelector('jqx-list-box');

 let selectedValues = listBox.selectedValues;

selectionMode string one

Determines how many items can be selected. Possible values: 'none', 'default', 'zeroOrMany', 'oneOrMany', 'zeroOrOne', 'one', 'checkBox', 'radioButton'.

Code examples

Set the selectionMode property.

 let listBox = document.querySelector('jqx-list-box');

 listBox.selectionMode = 'zeroOrOne';

Get the selectionMode property.

 let listBox = document.querySelector('jqx-list-box');

 let selectionMode = listBox.selectionMode;

sorted boolean false

Determines whether the items are sorted alphabetically or not

Code examples

Set the sorted property.

 let listBox = document.querySelector('jqx-list-box');

 listBox.sorted = false;

Get the sorted property.

 let listBox = document.querySelector('jqx-list-box');

 let sorted = listBox.sorted;

valueMember string ""

Determines the value member of an item. Stored as value in the item object.

Code examples

Set the valueMember property.

 let listBox = document.querySelector('jqx-list-box');

 listBox.valueMember = 'newValue';

Get the valueMember property.

 let listBox = document.querySelector('jqx-list-box');

 let valueMember = listBox.valueMember;

virtualized boolean false

Determines weather or not Virtualization is used for the ListBox.

Code examples

Set the virtualized property.

 let listBox = document.querySelector('jqx-list-box');

 listBox.virtualized = false;

Get the virtualized property.

 let listBox = document.querySelector('jqx-list-box');

 let virtualized = listBox.virtualized;

change Event

This event is triggered when selection is changed.

Code examples

Bind to the change event by type: jqxListBox

 let listBox = document.querySelector('jqx-list-box');

 listBox.addEventListener('change', function (event) {
     // event handling code goes here.
 }

dragEnd Event

This event is triggered when an item is dragged.

Code examples

Bind to the dragEnd event by type: jqxListBox

 let listBox = document.querySelector('jqx-list-box');

 listBox.addEventListener('dragEnd', function (event) {
     // event handling code goes here.
 }

dragStart Event

This event is triggered when an item is dropped.

Code examples

Bind to the dragStart event by type: jqxListBox

 let listBox = document.querySelector('jqx-list-box');

 listBox.addEventListener('dragStart', function (event) {
     // event handling code goes here.
 }

scrollBottomReached Event

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

Code examples

Bind to the scrollBottomReached event by type: jqxListBox

 let listBox = document.querySelector('jqx-list-box');

 listBox.addEventListener('scrollBottomReached', function (event) {
     // event handling code goes here.
 }

scrollTopReached Event

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

Code examples

Bind to the scrollTopReached event by type: jqxListBox

 let listBox = document.querySelector('jqx-list-box');

 listBox.addEventListener('scrollTopReached', function (event) {
     // event handling code goes here.
 }

swipeleft Event

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

Code examples

Bind to the swipeleft event by type: jqxListBox

 let listBox = document.querySelector('jqx-list-box');

 listBox.addEventListener('swipeleft', function (event) {
     // event handling code goes here.
 }

swiperight Event

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

Code examples

Bind to the swiperight event by type: jqxListBox

 let listBox = document.querySelector('jqx-list-box');

 listBox.addEventListener('swiperight', function (event) {
     // event handling code goes here.
 }

clearItems Method

clearSelection Method

getItem Method

Returns an item instance from the listBox.

Parameter	Type	Description
value	string	The value of an item from the listBox.

Return Value
HTMLElement

Code examples

Invoke the getItem method.

// Set the value.

 let listBox = document.querySelector('jqx-list-box');

 listBox.getItem('Second');

items Method

insert Method

Inserts a new item at a specified position.

Parameter	Type	Description
position	number	The position where the item must be inserted.
value	any	The value of the new item.

Return Value
None

Code examples

Invoke the insert method.

// Set the value.

 let listBox = document.querySelector('jqx-list-box');

 listBox.insert('New item');

remove Method

select Method

Selects an item from the listBox.

Parameter	Type	Description
item	String/HTMLElement	A string, representing the value of the item or an HTML Element referencing an item from the list

Return Value
None

Code examples

Invoke the select method.

// Set the value.

 let listBox = document.querySelector('jqx-list-box');

 listBox.select('Second Item');

unselect Method

Unselects an item from the listBox.

Parameter	Type	Description
item	String/HTMLElement	A string, representing the value of the item or an HTML Element referencing an item from the list

Return Value
None

Code examples

Invoke the unselect method.

// Set the value.

 let listBox = document.querySelector('jqx-list-box');

 listBox.unselect('Second Item');

update Method

Updates an item from the listBox.

Parameter	Type	Description
position	number	The position where the item must be updated.
value	any	The value of the updated item.

Return Value
None

Code examples

Invoke the update method.

// Set the value.

 let listBox = document.querySelector('jqx-list-box');

 listBox.update('Updated item');

Properties

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Events

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Methods

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples