Determines the data source that will be loaded to the combo box.

Code examples

Set the dataSource property.

 let comboBox = document.querySelector('jqx-combo-box');

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

Get the dataSource property.

 let comboBox = document.querySelector('jqx-combo-box');

 let dataSource = comboBox.dataSource;

Enables or disables the combo box.

Code examples

Set the disabled property.

 let comboBox = document.querySelector('jqx-combo-box');

 comboBox.disabled = false;

Get the disabled property.

 let comboBox = document.querySelector('jqx-combo-box');

 let disabled = comboBox.disabled;

Displays or hides the loading indicator

Code examples

Set the displayLoadingIndicator property.

 let comboBox = document.querySelector('jqx-combo-box');

 comboBox.displayLoadingIndicator = false;

Get the displayLoadingIndicator property.

 let comboBox = document.querySelector('jqx-combo-box');

 let displayLoadingIndicator = comboBox.displayLoadingIndicator;

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 comboBox = document.querySelector('jqx-combo-box');

 comboBox.displayMember = 'name';

Get the displayMember property.

 let comboBox = document.querySelector('jqx-combo-box');

 let displayMember = comboBox.displayMember;

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

Code examples

Set the dropDownOpenMode property.

 let comboBox = document.querySelector('jqx-combo-box');

 comboBox.dropDownOpenMode = 'auto';

Get the dropDownOpenMode property.

 let comboBox = document.querySelector('jqx-combo-box');

 let dropDownOpenMode = comboBox.dropDownOpenMode;

Determines the height of the dropDown list.

Code examples

Set the dropDownHeight property.

 let comboBox = document.querySelector('jqx-combo-box');

 comboBox.dropDownHeight = '50';

Get the dropDownHeight property.

 let comboBox = document.querySelector('jqx-combo-box');

 let dropDownHeight = comboBox.dropDownHeight;

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

Code examples

Set the dropDownVerticalPosition property.

 let comboBox = document.querySelector('jqx-combo-box');

 comboBox.dropDownVerticalPosition = 'bottom';

Get the dropDownVerticalPosition property.

 let comboBox = document.querySelector('jqx-combo-box');

 let dropDownVerticalPosition = comboBox.dropDownVerticalPosition;

Determines the width of the dropDown list.

Code examples

Set the dropDownWidth property.

 let comboBox = document.querySelector('jqx-combo-box');

 comboBox.dropDownWidth = '400';

Get the dropDownWidth property.

 let comboBox = document.querySelector('jqx-combo-box');

 let dropDownWidth = comboBox.dropDownWidth;

Determines whether the Filtering is enabled.

Code examples

Set the filterable property.

 let comboBox = document.querySelector('jqx-combo-box');

 comboBox.filterable = false;

Get the filterable property.

 let comboBox = document.querySelector('jqx-combo-box');

 let filterable = comboBox.filterable;

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 comboBox = document.querySelector('jqx-combo-box');

 comboBox.filterMode = 'equals';

Get the filterMode property.

 let comboBox = document.querySelector('jqx-combo-box');

 let filterMode = comboBox.filterMode;

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

Code examples

Set the filterInputPlaceholder property.

 let comboBox = document.querySelector('jqx-combo-box');

 comboBox.filterInputPlaceholder = 'Awaiting entry:';

Get the filterInputPlaceholder property.

 let comboBox = document.querySelector('jqx-combo-box');

 let filterInputPlaceholder = comboBox.filterInputPlaceholder;

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 comboBox = document.querySelector('jqx-combo-box');

 comboBox.grouped = false;

Get the grouped property.

 let comboBox = document.querySelector('jqx-combo-box');

 let grouped = comboBox.grouped;

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 comboBox = document.querySelector('jqx-combo-box');

 comboBox.groupMember = 'section';

Get the groupMember property.

 let comboBox = document.querySelector('jqx-combo-box');

 let groupMember = comboBox.groupMember;

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 comboBox = document.querySelector('jqx-combo-box');

 comboBox.incrementalSearchDelay = 500;

Get the incrementalSearchDelay property.

 let comboBox = document.querySelector('jqx-combo-box');

 let incrementalSearchDelay = comboBox.incrementalSearchDelay;

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 comboBox = document.querySelector('jqx-combo-box');

 comboBox.incrementalSearchMode = 'endsWith';

Get the incrementalSearchMode property.

 let comboBox = document.querySelector('jqx-combo-box');

 let incrementalSearchMode = comboBox.incrementalSearchMode;

Determines the height of the items.

Code examples

Set the itemHeight property.

 let comboBox = document.querySelector('jqx-combo-box');

 comboBox.itemHeight = 'auto';

Get the itemHeight property.

 let comboBox = document.querySelector('jqx-combo-box');

 let itemHeight = comboBox.itemHeight;

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 comboBox = document.querySelector('jqx-combo-box');

 comboBox.itemTemplate = 'templateB';

Get the itemTemplate property.

 let comboBox = document.querySelector('jqx-combo-box');

 let itemTemplate = comboBox.itemTemplate;

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

Code examples

Set the listBoxPlaceholder property.

 let comboBox = document.querySelector('jqx-combo-box');

 comboBox.listBoxPlaceholder = 'Empty';

Get the listBoxPlaceholder property.

 let comboBox = document.querySelector('jqx-combo-box');

 let listBoxPlaceholder = comboBox.listBoxPlaceholder;

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 comboBox = document.querySelector('jqx-combo-box');

 comboBox.loadingIndicatorPlaceholder = 'LOADING...';

Get the loadingIndicatorPlaceholder property.

 let comboBox = document.querySelector('jqx-combo-box');

 let loadingIndicatorPlaceholder = comboBox.loadingIndicatorPlaceholder;

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

Code examples

Set the loadingIndicatorPosition property.

 let comboBox = document.querySelector('jqx-combo-box');

 comboBox.loadingIndicatorPosition = 'top';

Get the loadingIndicatorPosition property.

 let comboBox = document.querySelector('jqx-combo-box');

 let loadingIndicatorPosition = comboBox.loadingIndicatorPosition;

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 comboBox = document.querySelector('jqx-combo-box');

 comboBox.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 comboBox = document.querySelector('jqx-combo-box');

 let messages = comboBox.messages;

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

Code examples

Set the placeholder property.

 let comboBox = document.querySelector('jqx-combo-box');

 comboBox.placeholder = 'Submit';

Get the placeholder property.

 let comboBox = document.querySelector('jqx-combo-box');

 let placeholder = comboBox.placeholder;

Disables user interaction with the element.

Code examples

Set the readonly property.

 let comboBox = document.querySelector('jqx-combo-box');

 comboBox.readonly = false;

Get the readonly property.

 let comboBox = document.querySelector('jqx-combo-box');

 let readonly = comboBox.readonly;

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

Code examples

Set the selectionDisplayMode property.

 let comboBox = document.querySelector('jqx-combo-box');

 comboBox.selectionDisplayMode = 'default';

Get the selectionDisplayMode property.

 let comboBox = document.querySelector('jqx-combo-box');

 let selectionDisplayMode = comboBox.selectionDisplayMode;

Sets or gets elected indexes.

Code examples

Set the selectedIndexes property.

 let comboBox = document.querySelector('jqx-combo-box');

 comboBox.selectedIndexes = ["item 2"];

Get the selectedIndexes property.

 let comboBox = document.querySelector('jqx-combo-box');

 let selectedIndexes = comboBox.selectedIndexes;

Sets or gets elected indexes.

Code examples

Set the selectedValues property.

 let comboBox = document.querySelector('jqx-combo-box');

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

Get the selectedValues property.

 let comboBox = document.querySelector('jqx-combo-box');

 let selectedValues = comboBox.selectedValues;

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

Code examples

Set the selectionMode property.

 let comboBox = document.querySelector('jqx-combo-box');

 comboBox.selectionMode = 'oneOrMany';

Get the selectionMode property.

 let comboBox = document.querySelector('jqx-combo-box');

 let selectionMode = comboBox.selectionMode;

Determines whether the items are sorted alphabetically or not

Code examples

Set the sorted property.

 let comboBox = document.querySelector('jqx-combo-box');

 comboBox.sorted = false;

Get the sorted property.

 let comboBox = document.querySelector('jqx-combo-box');

 let sorted = comboBox.sorted;

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

Code examples

Set the valueMember property.

 let comboBox = document.querySelector('jqx-combo-box');

 comboBox.valueMember = 'newValue';

Get the valueMember property.

 let comboBox = document.querySelector('jqx-combo-box');

 let valueMember = comboBox.valueMember;

Determines weather or not Virtualization is used for the dropDownList.

Code examples

Set the virtualized property.

 let comboBox = document.querySelector('jqx-combo-box');

 comboBox.virtualized = false;

Get the virtualized property.

 let comboBox = document.querySelector('jqx-combo-box');

 let virtualized = comboBox.virtualized;

This event is triggered when selection is changed.

Code examples

Bind to the change event by type: jqxComboBox

 let comboBox = document.querySelector('jqx-combo-box'); 

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

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

Code examples

Bind to the close event by type: jqxComboBox

 let comboBox = document.querySelector('jqx-combo-box'); 

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

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

Code examples

Bind to the closing event by type: jqxComboBox

 let comboBox = document.querySelector('jqx-combo-box'); 

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

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

Code examples

Bind to the open event by type: jqxComboBox

 let comboBox = document.querySelector('jqx-combo-box'); 

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

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

Code examples

Bind to the opening event by type: jqxComboBox

 let comboBox = document.querySelector('jqx-combo-box'); 

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

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

Code examples

Bind to the scrollBottomReached event by type: jqxComboBox

 let comboBox = document.querySelector('jqx-combo-box'); 

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

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

Code examples

Bind to the scrollTopReached event by type: jqxComboBox

 let comboBox = document.querySelector('jqx-combo-box'); 

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

Removes all items from the drop down list.

Code examples

Invoke the clearItems method.

Unselects all items.

Code examples

Invoke the clearSelection method.

Closes the dropDown list.

Code examples

Invoke the close method.

Returns an item instance from the dropDown list.

Code examples

Invoke the getItem method.

// Set the value.

 let comboBox = document.querySelector('jqx-combo-box'); 

 comboBox.getItem('Second'); 

Returns an array with the items from the dropDownList.

Code examples

Invoke the items method.

Inserts a new item at a specified position.

Code examples

Invoke the insert method.

// Set the value.

 let comboBox = document.querySelector('jqx-combo-box'); 

 comboBox.insert('New item'); 

Opens the dropDown list.

Code examples

Invoke the open method.

Removes an item at a specified position.

Code examples

Invoke the remove method.

Selects an item from the dropDown list.

Code examples

Invoke the select method.

// Set the value.

 let comboBox = document.querySelector('jqx-combo-box'); 

 comboBox.select('Second Item'); 

Unselects an item from the dropDown list.

Code examples

Invoke the unselect method.

// Set the value.

 let comboBox = document.querySelector('jqx-combo-box'); 

 comboBox.unselect('Second Item'); 

Updates an item from the dropDown list.

Code examples

Invoke the update method.

// Set the value.

 let comboBox = document.querySelector('jqx-combo-box'); 

 comboBox.update('Updated item');