RibbonComboBoxSettings API in React Ribbon API component

Defines the ribbon combobox item.

Properties

allowFiltering

boolean

Specifies whether to show the filter bar (search box) of the combobox. The filter action retrieves matched items through the filtering event based on the characters typed in the search TextBox. If no match is found, the value of the noRecordsTemplate property will be displayed.

Defaults to false

autofill

boolean

Specifies whether to suggest a first matched item in input when searching. No action happens when no matches found.

Defaults to true

cssClass

string

Defines the CSS class to customize the appearance of the combobox.

Defaults to ”

dataSource

{ : }[] | string[] | number[] | boolean[]

Defines the list of items to shown in the combobox.

Defaults to []

fields

FieldSettingsModel

Specifies the mapping for the columns of the data table bind to the combobox.

• text - Maps the text column from data table for each list item.
• value - Maps the value column from data table for each list item.
• iconCss - Maps the icon class column from data table for each list item.
• groupBy - Group the list items with it’s related items by mapping groupBy field.

Defaults to {text: null, value: null, iconCss: null, groupBy: null}

filterType

FilterType

Specifies filter type to be considered on search action. The FilterType and its supported data types are

FilterType	Description	Supported Types
StartsWith	Checks whether a value begins with the specified value.	String
EndsWith	Checks whether a value ends with specified value.	String
Contains	Checks whether a value contains with specified value.	String

Defaults to Contains

footerTemplate

string | function | JSX.Element

Specifies the template content for the footer container of the popup list.

Defaults to null

groupTemplate

string | function | JSX.Element

Specifies the template content for the group headers present in the popup list.

Defaults to null

headerTemplate

string | function | JSX.Element

Specifies the template content for the header container of the popup list.

Defaults to null

htmlAttributes

{ : }

Specifies additional HTML attributes to be applied to the combobox.

Defaults to {}

index

number

Specifies the index of the selected item in the combobox.

Defaults to null

itemTemplate

string | function | JSX.Element

Specifies the template content for each list item present in the popup.

Defaults to null

label

string

Specifies the label text for the overflow item.

Defaults to ”

noRecordsTemplate

string | function | JSX.Element

Specifies the template content for the popup list of combobox when no data is available.

Defaults to ‘No records found’

placeholder

string

Specifies a short hint that describes the expected value of the combobox.

Defaults to null

popupHeight

string | number

Specifies the height of the popup list.

Defaults to ‘300px’

popupWidth

string | number

Specifies the width of the popup list. By default, the popup width sets based on the width of the combobox.

Defaults to ‘100%’

showClearButton

boolean

Specifies whether to show or hide the clear button. When the clear button is clicked, value, text, and index properties are reset to null.

Defaults to true

sortOrder

SortOrder

Specifies the order in which the data source needs to be sorted. The available type of sort orders are

• None - The data source is not sorted.
• Ascending - The data source is sorted in ascending order.
• Descending - The data source is sorted in descending order.

Defaults to null

text

string

Defines the display text of the selected item in the combobox.

Defaults to null

value

number | string | boolean

Defines the value of the selected item in the combobox.

Defaults to null

width

string | number

Specifies the width of the combobox. By default, the combobox width sets based on the width of its parent container.

Defaults to ‘150px’

Events

beforeOpen

EmitType<BeforeOpenEventArgs>

Event triggers before opening the popup.

change

EmitType<ChangeEventArgs>

Event triggers when an item in a popup is selected or when the model value is changed by user.

close

EmitType<PopupEventArgs>

Event triggers when the popup is closed.

created

EmitType<Event>

Event triggers once the combobox is created.

filtering

EmitType<FilteringEventArgs>

Event triggers on typing a character in the combobox.

open

EmitType<PopupEventArgs>

Event triggers when the popup is opened

select

EmitType<SelectEventArgs>

Event triggers when an item in the popup is selected.