IgrCombo | Infragistics API Docs

The Combo component is similar to the Select component in that it provides a list of options from which the user can make a selection. In contrast to the Select component, the Combo component displays all options in a virtualized list of items, meaning the combo box can simultaneously show thousands of options, where one or more options can be selected. Additionally, users can create custom item templates, allowing for robust data visualization. The Combo component features case-sensitive filtering, grouping, complex data binding, dynamic addition of values and more.

Slots: prefix — Renders content before the input of the combo.; suffix — Renders content after the input of the combo.; header — Renders a container before the list of options of the combo.; footer — Renders a container after the list of options of the combo.; empty — Renders content when the combo dropdown list has no items/data.; helper-text — Renders content below the input of the combo.; toggle-icon — Renders content inside the suffix container of the combo.; clear-icon — Renders content inside the suffix container of the combo.; value-missing — Renders content when the required validation fails.; custom-error — Renders content when setCustomValidity(message) is set.; invalid — Renders content when the component is in invalid state (validity.valid = false).

CSS Parts: label — The encapsulated text label of the combo.; input — The main input field of the combo.; native-input — The native input of the main input field of the combo.; prefix — The prefix wrapper of the combo.; suffix — The suffix wrapper of the combo.; toggle-icon — The toggle icon wrapper of the combo.; clear-icon — The clear icon wrapper of the combo.; case-icon — The case icon wrapper of the combo.; helper-text — The helper text wrapper of the combo.; search-input — The search input field of the combo.; list-wrapper — The list of options wrapper of the combo.; list — The list of options box of the combo.; item — Represents each item in the list of options of the combo.; group-header — Represents each header in the list of options of the combo.; active — Appended to the item parts list when the item is active of the combo.; selected — Appended to the item parts list when the item is selected of the combo.; checkbox — Represents each checkbox of each list item of the combo.; checkbox-indicator — Represents the checkbox indicator of each list item of the combo.; checked — Appended to checkbox parts list when checkbox is checked in the combo.; header — The container holding the header content of the combo.; footer — The container holding the footer content of the combo.; empty — The container holding the empty content of the combo.

Properties

autofocus

The autofocus attribute of the control.

autofocus: boolean

autofocusList

Focuses the list of options when the menu opens.

autofocusList: boolean

caseSensitiveIcon

Enables the case sensitive search icon in the filtering input.

caseSensitiveIcon: boolean

data

The data source used to generate the list of options.

data: T[]

disableClear

Hides the clear button.

disableClear: boolean

disableFiltering

Disables the filtering of the list of options.

disableFiltering: boolean

displayKey

The key in the data source used to display items in the list.

displayKey: keyof T

filteringOptions

An object that configures the filtering of the combo.

filteringOptions: FilteringOptions<T>

groupHeaderTemplate

The template used for the content of each combo group header.

groupHeaderTemplate: ComboItemTemplate<T>

groupKey

The key in the data source used to group items in the list.

groupKey: keyof T

groupSorting

Sorts the items in each group by ascending or descending order.

groupSorting: GroupingDirection

itemTemplate

The template used for the content of each combo item.

itemTemplate: ComboItemTemplate<T>

label

The label attribute of the control.

label: string

locale

Gets/Sets the locale used for getting language, affecting resource strings.

locale: string

open

Sets the open state of the component.

open: boolean

outlined

The outlined attribute of the control.

outlined: boolean

placeholder

The placeholder attribute of the control.

placeholder: string

placeholderSearch

The placeholder attribute of the search input.

placeholderSearch: string

resourceStrings

The resource strings for localization.

resourceStrings: IComboResourceStrings

singleSelect

Enables single selection mode and moves item filtering to the main input.

singleSelect: boolean

value

Sets the value (selected items). The passed value must be a valid JSON array. If the data source is an array of complex objects, the valueKey attribute must be set. Note that when displayKey is not explicitly set, it will fall back to the value of valueKey.

value: ComboValue<T>[]

valueKey

The key in the data source used when selecting items.

valueKey: keyof T

Accessors

selection

Returns the current selection as an array of objects as provided in the data source.

get selection(): T[]

Returns T[]

Methods

blur

Removes focus from the component.

blur(): void

Returns void

deselect

Deselects option(s) in the list by either reference or valueKey. If not argument is provided all items will be deselected.

deselect(items: Item<T> | Item<T>[]): void

Parameters

items: Item<T> | Item<T>[]
One or more items to be deselected. Multiple items should be passed as an array. When valueKey is specified, the corresponding value should be used in place of the item reference.

Returns void

Example

const combo<IgcComboComponent<T>> = document.querySelector('igc-combo');

// Deselect one item at a time by reference when valueKey is not specified.
combo.deselect(combo.data[0]);

// Deselect multiple items at a time by reference when valueKey is not specified.
combo.deselect([combo.data[0], combo.data[1]]);

// Deselect one item at a time when valueKey is specified.
combo.deselect('BG01');

// Deselect multiple items at a time when valueKey is specified.
combo.deselect(['BG01', 'BG02']);

focus

Sets focus on the component.

focus(options: FocusOptions): void

Parameters

options: FocusOptions

Returns void

hide

Hides the list of options.

hide(): Promise<boolean>

Returns Promise<boolean>

select

Selects option(s) in the list by either reference or valueKey. If not argument is provided all items will be selected.

select(items: Item<T> | Item<T>[]): void

Parameters

items: Item<T> | Item<T>[]
One or more items to be selected. Multiple items should be passed as an array. When valueKey is specified, the corresponding value should be used in place of the item reference.

Returns void

Example

const combo<IgcComboComponent<T>> = document.querySelector('igc-combo');

// Select one item at a time by reference when valueKey is not specified.
combo.select(combo.data[0]);

// Select multiple items at a time by reference when valueKey is not specified.
combo.select([combo.data[0], combo.data[1]]);

// Select one item at a time when valueKey is specified.
combo.select('BG01');

// Select multiple items at a time when valueKey is specified.
combo.select(['BG01', 'BG02']);

show

Shows the list of options.

show(): Promise<boolean>

Returns Promise<boolean>

toggle

Toggles the list of options.

toggle(): Promise<boolean>

Returns Promise<boolean>

Events

onChange

Emitted when the control's selection has changed.

onChange(args: CustomEvent<IgrComboChangeEventArgs<any>>): void

Parameters

args: CustomEvent<IgrComboChangeEventArgs<any>>

Returns void

onClosed

Emitted after the list of options is closed.

onClosed(args: CustomEvent<void>): void

Parameters

args: CustomEvent<void>

Returns void

onClosing

Emitter just before the list of options is closed.

onClosing(args: CustomEvent<void>): void

Parameters

args: CustomEvent<void>

Returns void

onOpened

Emitted after the list of options is opened.

onOpened(args: CustomEvent<void>): void

Parameters

args: CustomEvent<void>

Returns void

onOpening

Emitted just before the list of options is opened.

onOpening(args: CustomEvent<void>): void

Parameters

args: CustomEvent<void>