React Multi-Column Combo Box Overview

    The Multi-Column Combo Box automatically generates columns for properties on the data object. This component is unique in that it's a combo box that visualizes large amounts of data similar to a data grid embedded in the dropdown.

    React Multi-Column Combo Box Example

    This sample demonstrates how to create IgrMultiColumnComboBox that displays data in multiple columns in a popup window.


    When installing the charts component, the core package must also be installed.

    npm install --save igniteui-react-core
    npm install --save igniteui-react-grids
    npm install --save igniteui-react-inputs
    npm install --save igniteui-react-layouts

    Component Modules

    The Multi-Column Combo Box requires the following modules:

    import { IgrMultiColumnComboBoxModule } from 'igniteui-react-grids';
    import { IgrMultiColumnComboBox } from 'igniteui-react-grids';


    Binding a Data Source

    In order to display your objects in the Multi-Column Combo Box component, you will need to bind the DataSource property. This can be bound in the form of an array of complex objects. The following code demonstrates how to bind the data source property.

    In the below code snippet, the "countryNames" collection is an any[] full of custom objects.

    <IgrMultiColumnComboBox height="50px" width="400px" dataSource={this.countryNames} />

    Setting Display Value and Data Value

    You can configure different properties of the Multi-Column Combo Box's bound DataSource to act as the display text for the control as well as the underlying value when a selection is made. This is done by setting the textField and valueField properties of the control, respectively, to the name of the property on the data item that you want to represent these things.

    The following code snippet shows how to set these properties, given that the underlying data item has a "Country" and "ID" property:

    <IgrMultiColumnComboBox height="50px" width="400px" dataSource={this.countryData}
                            textField="Country" valueField={["ID"]}/>

    Setting Fields

    By default, the Multi-Column Combo Box will show all of the properties on the underlying data item, but this can be controlled by setting the fields property on the component. This property takes a string[] of property paths on the underlying data item to determine which properties are shown.

    The following code snippet shows how to set this, and the resulting drop-down would only show the ID and Country columns:

    <IgrMultiColumnComboBox height="50px" width="400px" dataSource={this.countryData}
                            fields={["ID", "Country"]} />

    Setting Placeholder Text

    It is possible to configure the text that shows as a placeholder for when there is no selection in the Multi-Column Combo Box component. This is done by setting the placeholder property to the string you would like to be displayed. The following code demonstrates how to set this:

    <IgrMultiColumnComboBox height="50px" width="400px" dataSource={this.countryData}
                            placeholder="Please choose a country" />

    Configuring Sorting Mode

    The user has the ability to sort the columns that are displayed in the Multi-Column Combo Box by clicking the header of the column in the drop-down. The way the sorting is configured can be modified as well, as the columns can be sorted by only a single column or multiple columns, and they can be limited to either ascending and descending, or they can be tri-state. This is done by setting the sortMode property of the component.

    Note, the TriState sort options will allow sorted columns to be unsorted.

    The following code demonstrates how to set the Multi-Column Combo Box to be able to sort by multiple columns tri-state.

    <IgrMultiColumnComboBox height="50px" width="400px" dataSource={this.countryData}
                            sortMode={SortMode.SortByMultipleColumnsTriState} />

    API References