DropDownList API Reference

dataSource any

Determines the data source that will be loaded to the drop down list.

Code examples

Set the dataSource property.

 let dropDownList = document.querySelector('jqx-drop-down-list');

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

Get the dataSource property.

 let dropDownList = document.querySelector('jqx-drop-down-list');

 let dataSource = dropDownList.dataSource;

disabled boolean false

Enables or disables the dropDown list.

Code examples

Set the disabled property.

 let dropDownList = document.querySelector('jqx-drop-down-list');

 dropDownList.disabled = false;

Get the disabled property.

 let dropDownList = document.querySelector('jqx-drop-down-list');

 let disabled = dropDownList.disabled;

displayLoadingIndicator boolean false

Displays or hides the loading indicator

Code examples

Set the displayLoadingIndicator property.

 let dropDownList = document.querySelector('jqx-drop-down-list');

 dropDownList.displayLoadingIndicator = false;

Get the displayLoadingIndicator property.

 let dropDownList = document.querySelector('jqx-drop-down-list');

 let displayLoadingIndicator = dropDownList.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 dropDownList = document.querySelector('jqx-drop-down-list');

 dropDownList.displayMember = 'name';

Get the displayMember property.

 let dropDownList = document.querySelector('jqx-drop-down-list');

 let displayMember = dropDownList.displayMember;

dropDownOpenMode string default

Determines when to open the dropDown list. Possible values: 'none', 'default', 'dropDownButton', 'auto'.

Code examples

Set the dropDownOpenMode property.

 let dropDownList = document.querySelector('jqx-drop-down-list');

 dropDownList.dropDownOpenMode = 'auto';

Get the dropDownOpenMode property.

 let dropDownList = document.querySelector('jqx-drop-down-list');

 let dropDownOpenMode = dropDownList.dropDownOpenMode;

dropDownHeight string 200

Determines the height of the dropDown list.

Code examples

Set the dropDownHeight property.

 let dropDownList = document.querySelector('jqx-drop-down-list');

 dropDownList.dropDownHeight = '50';

Get the dropDownHeight property.

 let dropDownList = document.querySelector('jqx-drop-down-list');

 let dropDownHeight = dropDownList.dropDownHeight;

dropDownVerticalPosition string overlay

Determines the vertical position of the dropDown list. Possible values: 'top', 'bottom', 'overlay'.

Code examples

Set the dropDownVerticalPosition property.

 let dropDownList = document.querySelector('jqx-drop-down-list');

 dropDownList.dropDownVerticalPosition = 'bottom';

Get the dropDownVerticalPosition property.

 let dropDownList = document.querySelector('jqx-drop-down-list');

 let dropDownVerticalPosition = dropDownList.dropDownVerticalPosition;

dropDownWidth string auto

Determines the width of the dropDown list.

Code examples

Set the dropDownWidth property.

 let dropDownList = document.querySelector('jqx-drop-down-list');

 dropDownList.dropDownWidth = '400';

Get the dropDownWidth property.

 let dropDownList = document.querySelector('jqx-drop-down-list');

 let dropDownWidth = dropDownList.dropDownWidth;

filterable boolean false

Determines whether the Filtering is enabled.

Code examples

Set the filterable property.

 let dropDownList = document.querySelector('jqx-drop-down-list');

 dropDownList.filterable = false;

Get the filterable property.

 let dropDownList = document.querySelector('jqx-drop-down-list');

 let filterable = dropDownList.filterable;

filterMode string startsWithIgnoreCase

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

Code examples

Set the filterMode property.

 let dropDownList = document.querySelector('jqx-drop-down-list');

 dropDownList.filterMode = 'equals';

Get the filterMode property.

 let dropDownList = document.querySelector('jqx-drop-down-list');

 let filterMode = dropDownList.filterMode;

filterInputPlaceholder string

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

Code examples

Set the filterInputPlaceholder property.

 let dropDownList = document.querySelector('jqx-drop-down-list');

 dropDownList.filterInputPlaceholder = 'Awaiting entry:';

Get the filterInputPlaceholder property.

 let dropDownList = document.querySelector('jqx-drop-down-list');

 let filterInputPlaceholder = dropDownList.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 dropDownList = document.querySelector('jqx-drop-down-list');

 dropDownList.grouped = false;

Get the grouped property.

 let dropDownList = document.querySelector('jqx-drop-down-list');

 let grouped = dropDownList.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 dropDownList = document.querySelector('jqx-drop-down-list');

 dropDownList.groupMember = 'section';

Get the groupMember property.

 let dropDownList = document.querySelector('jqx-drop-down-list');

 let groupMember = dropDownList.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 dropDownList = document.querySelector('jqx-drop-down-list');

 dropDownList.incrementalSearchDelay = 500;

Get the incrementalSearchDelay property.

 let dropDownList = document.querySelector('jqx-drop-down-list');

 let incrementalSearchDelay = dropDownList.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 dropDownList = document.querySelector('jqx-drop-down-list');

 dropDownList.incrementalSearchMode = 'endsWith';

Get the incrementalSearchMode property.

 let dropDownList = document.querySelector('jqx-drop-down-list');

 let incrementalSearchMode = dropDownList.incrementalSearchMode;

itemHeight string null

Determines the height of the items.

Code examples

Set the itemHeight property.

 let dropDownList = document.querySelector('jqx-drop-down-list');

 dropDownList.itemHeight = 'auto';

Get the itemHeight property.

 let dropDownList = document.querySelector('jqx-drop-down-list');

 let itemHeight = dropDownList.itemHeight;

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 dropDownList = document.querySelector('jqx-drop-down-list');

 dropDownList.itemTemplate = 'templateB';

Get the itemTemplate property.

 let dropDownList = document.querySelector('jqx-drop-down-list');

 let itemTemplate = dropDownList.itemTemplate;

listBoxPlaceholder string No Items

Determines the placeholder for the list box, displayed when there are no items in it.

Code examples

Set the listBoxPlaceholder property.

 let dropDownList = document.querySelector('jqx-drop-down-list');

 dropDownList.listBoxPlaceholder = 'Empty';

Get the listBoxPlaceholder property.

 let dropDownList = document.querySelector('jqx-drop-down-list');

 let listBoxPlaceholder = dropDownList.listBoxPlaceholder;

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 dropDownList = document.querySelector('jqx-drop-down-list');

 dropDownList.loadingIndicatorPlaceholder = 'LOADING...';

Get the loadingIndicatorPlaceholder property.

 let dropDownList = document.querySelector('jqx-drop-down-list');

 let loadingIndicatorPlaceholder = dropDownList.loadingIndicatorPlaceholder;

loadingIndicatorPosition string center

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

Code examples

Set the loadingIndicatorPosition property.

 let dropDownList = document.querySelector('jqx-drop-down-list');

 dropDownList.loadingIndicatorPosition = 'top';

Get the loadingIndicatorPosition property.

 let dropDownList = document.querySelector('jqx-drop-down-list');

 let loadingIndicatorPosition = dropDownList.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 dropDownList = document.querySelector('jqx-drop-down-list');

 dropDownList.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 dropDownList = document.querySelector('jqx-drop-down-list');

 let messages = dropDownList.messages;

placeholder string Please Select:

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

Code examples

Set the placeholder property.

 let dropDownList = document.querySelector('jqx-drop-down-list');

 dropDownList.placeholder = 'Submit';

Get the placeholder property.

 let dropDownList = document.querySelector('jqx-drop-down-list');

 let placeholder = dropDownList.placeholder;

readonly boolean false

Disables user interaction with the element.

Code examples

Set the readonly property.

 let dropDownList = document.querySelector('jqx-drop-down-list');

 dropDownList.readonly = false;

Get the readonly property.

 let dropDownList = document.querySelector('jqx-drop-down-list');

 let readonly = dropDownList.readonly;

selectionDisplayMode string default

Determines what will be displayed in the dropDown selection field. Possible values: 'default', 'placeholder'.

Code examples

Set the selectionDisplayMode property.

 let dropDownList = document.querySelector('jqx-drop-down-list');

 dropDownList.selectionDisplayMode = 'default';

Get the selectionDisplayMode property.

 let dropDownList = document.querySelector('jqx-drop-down-list');

 let selectionDisplayMode = dropDownList.selectionDisplayMode;

selectedIndexes array

Sets or gets elected indexes.

Code examples

Set the selectedIndexes property.

 let dropDownList = document.querySelector('jqx-drop-down-list');

 dropDownList.selectedIndexes = ["item 2"];

Get the selectedIndexes property.

 let dropDownList = document.querySelector('jqx-drop-down-list');

 let selectedIndexes = dropDownList.selectedIndexes;

selectedValues array

Sets or gets elected indexes.

Code examples

Set the selectedValues property.

 let dropDownList = document.querySelector('jqx-drop-down-list');

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

Get the selectedValues property.

 let dropDownList = document.querySelector('jqx-drop-down-list');

 let selectedValues = dropDownList.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 dropDownList = document.querySelector('jqx-drop-down-list');

 dropDownList.selectionMode = 'oneOrMany';

Get the selectionMode property.

 let dropDownList = document.querySelector('jqx-drop-down-list');

 let selectionMode = dropDownList.selectionMode;

sorted boolean false

Determines whether the items are sorted alphabetically or not

Code examples

Set the sorted property.

 let dropDownList = document.querySelector('jqx-drop-down-list');

 dropDownList.sorted = false;

Get the sorted property.

 let dropDownList = document.querySelector('jqx-drop-down-list');

 let sorted = dropDownList.sorted;

valueMember string ""

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

Code examples

Set the valueMember property.

 let dropDownList = document.querySelector('jqx-drop-down-list');

 dropDownList.valueMember = 'newValue';

Get the valueMember property.

 let dropDownList = document.querySelector('jqx-drop-down-list');

 let valueMember = dropDownList.valueMember;

virtualized boolean false

Determines weather or not Virtualization is used for the dropDownList.

Code examples

Set the virtualized property.

 let dropDownList = document.querySelector('jqx-drop-down-list');

 dropDownList.virtualized = false;

Get the virtualized property.

 let dropDownList = document.querySelector('jqx-drop-down-list');

 let virtualized = dropDownList.virtualized;

change Event

This event is triggered when selection is changed.

Code examples

Bind to the change event by type: jqxDropDownList

 let dropDownList = document.querySelector('jqx-drop-down-list');

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

close Event

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

Code examples

Bind to the close event by type: jqxDropDownList

 let dropDownList = document.querySelector('jqx-drop-down-list');

 dropDownList.addEventListener('close', function (event) {
     // event handling code goes here.
 }

closing Event

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

Code examples

Bind to the closing event by type: jqxDropDownList

 let dropDownList = document.querySelector('jqx-drop-down-list');

 dropDownList.addEventListener('closing', function (event) {
     // event handling code goes here.
 }

open Event

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

Code examples

Bind to the open event by type: jqxDropDownList

 let dropDownList = document.querySelector('jqx-drop-down-list');

 dropDownList.addEventListener('open', function (event) {
     // event handling code goes here.
 }

opening Event

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

Code examples

Bind to the opening event by type: jqxDropDownList

 let dropDownList = document.querySelector('jqx-drop-down-list');

 dropDownList.addEventListener('opening', function (event) {
     // event handling code goes here.
 }

scrollBottomReached Event

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

Code examples

Bind to the scrollBottomReached event by type: jqxDropDownList

 let dropDownList = document.querySelector('jqx-drop-down-list');

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

scrollTopReached Event

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

Code examples

Bind to the scrollTopReached event by type: jqxDropDownList

 let dropDownList = document.querySelector('jqx-drop-down-list');

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

clearItems Method

clearSelection Method

close Method

getItem Method

Returns an item instance from the dropDown list.

Parameter	Type	Description
value	string	The value of an item from the drop down list.

Return Value
HTMLElement

Code examples

Invoke the getItem method.

// Set the value.

 let dropDownList = document.querySelector('jqx-drop-down-list');

 dropDownList.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 dropDownList = document.querySelector('jqx-drop-down-list');

 dropDownList.insert('New item');

open Method

remove Method

select Method

Selects an item from the dropDown list.

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 dropDownList = document.querySelector('jqx-drop-down-list');

 dropDownList.select('Second Item');

unselect Method

Unselects an item from the dropDown list.

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 dropDownList = document.querySelector('jqx-drop-down-list');

 dropDownList.unselect('Second Item');

update Method

Updates an item from the dropDown list.

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 dropDownList = document.querySelector('jqx-drop-down-list');

 dropDownList.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

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

Code examples

Code examples