MultiColumnComboBox

23 Sep 202524 minutes to read

The MultiColumnComboBox allows the user to search and select values from a list. It provides a list of options that can be selected using a filter input.
The selected value will be displayed in the input element.

 <input type='text' id='multi-column'></input>

 let multiColObj: MultiColumnComboBox = new MultiColumnComboBox();
 multiColObj.appendTo('#multi-column');

Properties

actionFailureTemplate string|Function

Accepts the template and assigns it to the popup content when the data fetch request from the remote server fails.

Defaults to ‘Request Failed’

allowFiltering boolean

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

 <input type="text" id="empdata">

import { MultiColumnComboBox, ColumnModel } from '@syncfusion/ej2-multicolumn-combobox';

let data: { [key: string]: Object }[] = [
  {
    OrderID: 10248, CustomerID: 'VINET', Role: 'Admin', EmployeeID: 5, OrderDate: new Date(8364186e5), Freight: 32.38
  },
  {
    OrderID: 10249, CustomerID: 'TOMSP', Role: 'Employee', EmployeeID: 6, OrderDate: new Date(836505e6), Freight: 11.61
  },
  {
    OrderID: 10250, CustomerID: 'HANAR', Role: 'Admin', EmployeeID: 4, OrderDate: new Date(8367642e5), Freight: 65.83
  },
  {
    OrderID: 10251, CustomerID: 'VICTE', Role: 'Manager', EmployeeID: 3, OrderDate: new Date(8367642e5), Freight: 41.34
  }
];
const columns: ColumnModel[] = [
    { field: 'OrderID', header: 'Order ID', width: 120 },
    { field: 'CustomerID', width: 140, header: 'Customer ID' },
    { field: 'Freight', header: 'Freight', width: 120 },
    { field: 'OrderDate', header: 'Order Date', width: 140 }
];
// initialize MultiColumnComboBox component
let multiColObj: MultiColumnComboBox = new MultiColumnComboBox({
  dataSource: data,
  columns: columns,
  fields: { text: 'CustomerID', value: 'OrderID'},
  allowFiltering: true,
  filterType: 'StartsWith',
  placeholder: 'Select a data'
});
multiColObj.appendTo('#empdata');

Defaults to true

allowSorting boolean

Specifies whether sorting is allowed for the columns in the dropdown list.

Defaults to true

columns ColumnModel[]

Specifies the number of columns and its respective fields to be displayed in the dropdown popup.

 <input type="text" id="empdata">

import { MultiColumnComboBox, ColumnModel } from '@syncfusion/ej2-multicolumn-combobox';

let data: { [key: string]: Object }[] = [
  {
    OrderID: 10248, CustomerID: 'VINET', Role: 'Admin', EmployeeID: 5, OrderDate: new Date(8364186e5), Freight: 32.38
  },
  {
    OrderID: 10249, CustomerID: 'TOMSP', Role: 'Employee', EmployeeID: 6, OrderDate: new Date(836505e6), Freight: 11.61
  },
  {
    OrderID: 10250, CustomerID: 'HANAR', Role: 'Admin', EmployeeID: 4, OrderDate: new Date(8367642e5), Freight: 65.83
  },
  {
    OrderID: 10251, CustomerID: 'VICTE', Role: 'Manager', EmployeeID: 3, OrderDate: new Date(8367642e5), Freight: 41.34
  }
];
const columns: ColumnModel[] = [
    { field: 'OrderID', header: 'Order ID', width: 120 },
    { field: 'CustomerID', width: 140, header: 'Customer ID' },
    { field: 'Freight', header: 'Freight', width: 120 },
    { field: 'OrderDate', header: 'Order Date', width: 140 }
];
// initialize MultiColumnComboBox component
let multiColObj: MultiColumnComboBox = new MultiColumnComboBox({
  dataSource: data,
  columns: columns,
  fields: { text: 'CustomerID', value: 'OrderID'},
  placeholder: 'Select a data'
});
multiColObj.appendTo('#empdata');

Defaults to []

cssClass string

Sets CSS classes to the root element of the component that allows customization of appearance.

Defaults to ’’

dataSource Object|DataManager|DataResult

Accepts the list items either through local or remote service and binds it to the component.
It can be an array of JSON Objects or an instance of DataManager.

 <input type="text" id="empdata">

import { MultiColumnComboBox, ColumnModel } from '@syncfusion/ej2-multicolumn-combobox';

let data: { [key: string]: Object }[] = [
  {
    OrderID: 10248, CustomerID: 'VINET', Role: 'Admin', EmployeeID: 5, OrderDate: new Date(8364186e5), Freight: 32.38
  },
  {
    OrderID: 10249, CustomerID: 'TOMSP', Role: 'Employee', EmployeeID: 6, OrderDate: new Date(836505e6), Freight: 11.61
  },
  {
    OrderID: 10250, CustomerID: 'HANAR', Role: 'Admin', EmployeeID: 4, OrderDate: new Date(8367642e5), Freight: 65.83
  },
  {
    OrderID: 10251, CustomerID: 'VICTE', Role: 'Manager', EmployeeID: 3, OrderDate: new Date(8367642e5), Freight: 41.34
  }
];
const columns: ColumnModel[] = [
    { field: 'OrderID', header: 'Order ID', width: 120 },
    { field: 'CustomerID', width: 140, header: 'Customer ID' },
    { field: 'Freight', header: 'Freight', width: 120 },
    { field: 'OrderDate', header: 'Order Date', width: 140 }
];
// initialize MultiColumnComboBox component
let multiColObj: MultiColumnComboBox = new MultiColumnComboBox({
  dataSource: data,
  columns: columns,
  fields: { text: 'CustomerID', value: 'OrderID'},
  placeholder: 'Select a data',
  value: '10250'
});
multiColObj.appendTo('#empdata');

Defaults to []

disabled boolean

Specifies a value that indicates whether the component is disabled or not.

Defaults to false

enablePersistence boolean

Specifies the component’s state between page reloads. If enabled, the list of states for the value will be persisted.

Defaults to false

enableRtl boolean

Enable or disable rendering component in right to left direction.

Defaults to false

enableVirtualization boolean

Defines whether to enable virtual scrolling in the component.

Defaults to false

fields FieldSettingsModel

The fields property maps the columns of the data table and binds the data to the component.

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

 <input type="text" id="empdata">

import { MultiColumnComboBox, ColumnModel } from '@syncfusion/ej2-multicolumn-combobox';

let data: { [key: string]: Object }[] = [
  {
    OrderID: 10248, CustomerID: 'VINET', Role: 'Admin', EmployeeID: 5, OrderDate: new Date(8364186e5), Freight: 32.38
  },
  {
    OrderID: 10249, CustomerID: 'TOMSP', Role: 'Employee', EmployeeID: 6, OrderDate: new Date(836505e6), Freight: 11.61
  },
  {
    OrderID: 10250, CustomerID: 'HANAR', Role: 'Admin', EmployeeID: 4, OrderDate: new Date(8367642e5), Freight: 65.83
  },
  {
    OrderID: 10251, CustomerID: 'VICTE', Role: 'Manager', EmployeeID: 3, OrderDate: new Date(8367642e5), Freight: 41.34
  }
];
const columns: ColumnModel[] = [
    { field: 'OrderID', header: 'Order ID', width: 120 },
    { field: 'CustomerID', width: 140, header: 'Customer ID' },
    { field: 'Freight', header: 'Freight', width: 120 },
    { field: 'OrderDate', header: 'Order Date', width: 140 }
];
// initialize MultiColumnComboBox component
let multiColObj: MultiColumnComboBox = new MultiColumnComboBox({
  dataSource: data,
  columns: columns,
  fields: { text: 'CustomerID', value: 'OrderID'},
  placeholder: 'Select a data'
});
multiColObj.appendTo('#empdata');

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

filterType FilterType|string

Determines on which filter type, the component needs 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

The default value set to StartsWith, all the suggestion items which contain typed characters to listed in the suggestion popup.

 <input type="text" id="empdata">

import { MultiColumnComboBox, ColumnModel } from '@syncfusion/ej2-multicolumn-combobox';

let data: { [key: string]: Object }[] = [
  {
    OrderID: 10248, CustomerID: 'VINET', Role: 'Admin', EmployeeID: 5, OrderDate: new Date(8364186e5), Freight: 32.38
  },
  {
    OrderID: 10249, CustomerID: 'TOMSP', Role: 'Employee', EmployeeID: 6, OrderDate: new Date(836505e6), Freight: 11.61
  },
  {
    OrderID: 10250, CustomerID: 'HANAR', Role: 'Admin', EmployeeID: 4, OrderDate: new Date(8367642e5), Freight: 65.83
  },
  {
    OrderID: 10251, CustomerID: 'VICTE', Role: 'Manager', EmployeeID: 3, OrderDate: new Date(8367642e5), Freight: 41.34
  }
];
const columns: ColumnModel[] = [
    { field: 'OrderID', header: 'Order ID', width: 120 },
    { field: 'CustomerID', width: 140, header: 'Customer ID' },
    { field: 'Freight', header: 'Freight', width: 120 },
    { field: 'OrderDate', header: 'Order Date', width: 140 }
];
// initialize MultiColumnComboBox component
let multiColObj: MultiColumnComboBox = new MultiColumnComboBox({
  dataSource: data,
  columns: columns,
  fields: { text: 'CustomerID', value: 'OrderID'},
  allowFiltering: true,
  filterType: 'StartsWith',
  placeholder: 'Select a data'
});
multiColObj.appendTo('#empdata');

Defaults to FilterType.StartsWith

floatLabelType FloatLabelType

Specifies whether to display the floating label above the input element.
Possible values are:

Never - The label will never float in the input when the placeholder is available.
Always - The floating label will always float above the input.
Auto - The floating label will float above the input after focusing or entering a value in the input.

 <input type="text" id="empdata">

import { MultiColumnComboBox, ColumnModel } from '@syncfusion/ej2-multicolumn-combobox';

let data: { [key: string]: Object }[] = [
  {
    OrderID: 10248, CustomerID: 'VINET', Role: 'Admin', EmployeeID: 5, OrderDate: new Date(8364186e5), Freight: 32.38
  },
  {
    OrderID: 10249, CustomerID: 'TOMSP', Role: 'Employee', EmployeeID: 6, OrderDate: new Date(836505e6), Freight: 11.61
  },
  {
    OrderID: 10250, CustomerID: 'HANAR', Role: 'Admin', EmployeeID: 4, OrderDate: new Date(8367642e5), Freight: 65.83
  },
  {
    OrderID: 10251, CustomerID: 'VICTE', Role: 'Manager', EmployeeID: 3, OrderDate: new Date(8367642e5), Freight: 41.34
  }
];
const columns: ColumnModel[] = [
    { field: 'OrderID', header: 'Order ID', width: 120 },
    { field: 'CustomerID', width: 140, header: 'Customer ID' },
    { field: 'Freight', header: 'Freight', width: 120 },
    { field: 'OrderDate', header: 'Order Date', width: 140 }
];
// initialize MultiColumnComboBox component
let multiColObj: MultiColumnComboBox = new MultiColumnComboBox({
  dataSource: data,
  columns: columns,
  fields: { text: 'CustomerID', value: 'OrderID'},
  floatLabelType: 'Auto',
  placeholder: 'Select a data'
});
multiColObj.appendTo('#empdata');

Defaults to Never

footerTemplate string|Function

Accepts the template design and assigns it to the footer container of the popup.

Defaults to null

gridSettings GridSettingsModel

Specifies the configuration of the columns in the popup content.

 <input type="text" id="empdata">

import { MultiColumnComboBox, ColumnModel } from '@syncfusion/ej2-multicolumn-combobox';

let data: { [key: string]: Object }[] = [
  {
    OrderID: 10248, CustomerID: 'VINET', Role: 'Admin', EmployeeID: 5, OrderDate: new Date(8364186e5), Freight: 32.38
  },
  {
    OrderID: 10249, CustomerID: 'TOMSP', Role: 'Employee', EmployeeID: 6, OrderDate: new Date(836505e6), Freight: 11.61
  },
  {
    OrderID: 10250, CustomerID: 'HANAR', Role: 'Admin', EmployeeID: 4, OrderDate: new Date(8367642e5), Freight: 65.83
  },
  {
    OrderID: 10251, CustomerID: 'VICTE', Role: 'Manager', EmployeeID: 3, OrderDate: new Date(8367642e5), Freight: 41.34
  }
];
const columns: ColumnModel[] = [
    { field: 'OrderID', header: 'Order ID', width: 120 },
    { field: 'CustomerID', width: 140, header: 'Customer ID' },
    { field: 'Freight', header: 'Freight', width: 120 },
    { field: 'OrderDate', header: 'Order Date', width: 140 }
];
// initialize MultiColumnComboBox component
let multiColObj: MultiColumnComboBox = new MultiColumnComboBox({
  dataSource: data,
  columns: columns,
  fields: { text: 'CustomerID', value: 'OrderID'},
  gridSettings: { rowHeight: 40, enableAltRow: true, gridLines: 'Horizontal'},
  placeholder: 'Select a data'
});
multiColObj.appendTo('#empdata');

Defaults to {rowHeight: null, gridLines: Default, enableAltRow: false}

groupTemplate string|Function

Accepts the template design and assigns it to the group headers present in the popup list.

Defaults to null

htmlAttributes { : }

Allows additional HTML attributes such as title, name, etc., and accepts n number of attributes in a key-value pair format.

 <input type="text" id="empdata">

import { MultiColumnComboBox, ColumnModel } from '@syncfusion/ej2-multicolumn-combobox';

let data: { [key: string]: Object }[] = [
  {
    OrderID: 10248, CustomerID: 'VINET', Role: 'Admin', EmployeeID: 5, OrderDate: new Date(8364186e5), Freight: 32.38
  },
  {
    OrderID: 10249, CustomerID: 'TOMSP', Role: 'Employee', EmployeeID: 6, OrderDate: new Date(836505e6), Freight: 11.61
  },
  {
    OrderID: 10250, CustomerID: 'HANAR', Role: 'Admin', EmployeeID: 4, OrderDate: new Date(8367642e5), Freight: 65.83
  },
  {
    OrderID: 10251, CustomerID: 'VICTE', Role: 'Manager', EmployeeID: 3, OrderDate: new Date(8367642e5), Freight: 41.34
  }
];
const columns: ColumnModel[] = [
    { field: 'OrderID', header: 'Order ID', width: 120 },
    { field: 'CustomerID', width: 140, header: 'Customer ID' },
    { field: 'Freight', header: 'Freight', width: 120 },
    { field: 'OrderDate', header: 'Order Date', width: 140 }
];
// initialize MultiColumnComboBox component
let multiColObj: MultiColumnComboBox = new MultiColumnComboBox({
  dataSource: data,
  columns: columns,
  fields: { text: 'CustomerID', value: 'OrderID'},
  placeholder: 'Select a data',
  htmlAttributes: { name: "employee-data", title: "MultiColumnComboBox" }
});
multiColObj.appendTo('#empdata');

Defaults to {}

index number|null

Gets or sets the index of the selected item in the component.

Defaults to null

itemTemplate string|Function

Accepts the template design and assigns it to each items present in the popup.

 <input type="text" id="empdata">

import { MultiColumnComboBox, ColumnModel } from '@syncfusion/ej2-multicolumn-combobox';

let data: { [key: string]: Object }[] = [
  {
    OrderID: 10248, CustomerID: 'VINET', Role: 'Admin', EmployeeID: 5, OrderDate: new Date(8364186e5), Freight: 32.38
  },
  {
    OrderID: 10249, CustomerID: 'TOMSP', Role: 'Employee', EmployeeID: 6, OrderDate: new Date(836505e6), Freight: 11.61
  },
  {
    OrderID: 10250, CustomerID: 'HANAR', Role: 'Admin', EmployeeID: 4, OrderDate: new Date(8367642e5), Freight: 65.83
  },
  {
    OrderID: 10251, CustomerID: 'VICTE', Role: 'Manager', EmployeeID: 3, OrderDate: new Date(8367642e5), Freight: 41.34
  }
];
const columns: ColumnModel[] = [
    { field: 'OrderID', header: 'Order ID', width: 120 },
    { field: 'CustomerID', width: 140, header: 'Customer ID' },
    { field: 'Freight', header: 'Freight', width: 120 },
    { field: 'OrderDate', header: 'Order Date', width: 140 }
];
// initialize MultiColumnComboBox component
let multiColObj: MultiColumnComboBox = new MultiColumnComboBox({
  dataSource: data,
  columns: columns,
  fields: { text: 'CustomerID', value: 'OrderID'},
  placeholder: 'Select a data',
  itemTemplate: '<span>${CustomerID}</span> --- <span>${Freight}</span> --- <span>${OrderDate}</span>'
});
multiColObj.appendTo('#empdata');

Defaults to null

locale string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

Defaults to ’’

noRecordsTemplate string|Function

Accepts the template design and assigns it to popup list of component when no data is available on the component.

Defaults to ‘No records found’

placeholder string

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

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

Defaults to ‘100%’

query Query

Accepts the external Query that execute along with data processing.

 <input type="text" id="empdata">

import { MultiColumnComboBox, ColumnModel } from '@syncfusion/ej2-multicolumn-combobox';
import { Query, DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';

const columns: ColumnModel[] = [
    { field: 'FirstName', header: 'First Name', width: 120 },
    { field: 'EmployeeID', width: 140, header: 'Employee ID' }
];
// initialize MultiColumnComboBox component
let multiColObj: MultiColumnComboBox = new MultiColumnComboBox({
  //set the local data to dataSource property
  dataSource: new DataManager({
    url: 'https://ej2services.syncfusion.com/production/web-services/api/Employees',
    adaptor: new WebApiAdaptor,
    crossDomain: true
  }),
  columns: columns,
  // bind the Query instance to query property
  query: new Query().select(['FirstName', 'EmployeeID']).take(10).requiresCount(),
  fields: { text: 'FirstName', value: 'EmployeeID' },
  placeholder: 'Select a name',
});
comboBoxObj.appendTo('#empdata');

Defaults to null

readonly boolean

Specifies the user interactions on the component are disabled.

Defaults to false

showClearButton boolean

Specifies whether to show or hide the clear icon in textbox.
When the clear button is clicked, value, text properties will be reset to null.

Defaults to false

sortOrder SortOrder|string

Specifies the sortOrder to sort the data source.
The available type of sort orders are,

None - The datasource is not sorting. Default value is None.
Ascending - The datasource is sorting with ascending order.
Descending - The data source is sorting with descending order.

Defaults to SortOrder.None

sortType SortType|string

Specifies the type of sorting to be applied for the columns.

OneColumn - Allow sorting only one column.
MultipleColumns - Allow sorting multiple columns.

Defaults to SortType.OneColumn

text string

Gets or sets the display text of the selected item.

Defaults to null

value string

Gets or sets the value of the selected item.

 <input type="text" id="empdata">

import { MultiColumnComboBox, ColumnModel } from '@syncfusion/ej2-multicolumn-combobox';

let data: { [key: string]: Object }[] = [
  {
    OrderID: 10248, CustomerID: 'VINET', Role: 'Admin', EmployeeID: 5, OrderDate: new Date(8364186e5), Freight: 32.38
  },
  {
    OrderID: 10249, CustomerID: 'TOMSP', Role: 'Employee', EmployeeID: 6, OrderDate: new Date(836505e6), Freight: 11.61
  },
  {
    OrderID: 10250, CustomerID: 'HANAR', Role: 'Admin', EmployeeID: 4, OrderDate: new Date(8367642e5), Freight: 65.83
  },
  {
    OrderID: 10251, CustomerID: 'VICTE', Role: 'Manager', EmployeeID: 3, OrderDate: new Date(8367642e5), Freight: 41.34
  }
];
const columns: ColumnModel[] = [
    { field: 'OrderID', header: 'Order ID', width: 120 },
    { field: 'CustomerID', width: 140, header: 'Customer ID' },
    { field: 'Freight', header: 'Freight', width: 120 },
    { field: 'OrderDate', header: 'Order Date', width: 140 }
];
// initialize MultiColumnComboBox component
let multiColObj: MultiColumnComboBox = new MultiColumnComboBox({
  dataSource: data,
  columns: columns,
  fields: { text: 'CustomerID', value: 'OrderID'},
  placeholder: 'Select a data',
  value: '10250'
});
multiColObj.appendTo('#empdata');

Defaults to null

width string|number

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

Defaults to ‘100%’

Methods

addEventListener

Adds the handler to the given event listener.

Parameter	Type	Description
eventName	`string`	A String that specifies the name of the event
handler	`Function`	Specifies the call to run when the event occurs.

Returns void

addItems

Adds a new item to the popup list. By default, new item appends to the list as the last item,
but you can insert based on the index parameter.

Parameter	Type	Description
items	` `{ : }`[] `\|` `{ : }``	Specifies an array of JSON data or a JSON data.
index (optional)	`number`	Specifies the index to place the newly added item in the popup list.

Returns void

appendTo

Appends the control within the given HTML element

Parameter	Type	Description
selector (optional)	`string` \| `HTMLElement`	Target element where control needs to be appended

Returns void

attachUnloadEvent

Adding unload event to persist data when enable persistence true

Returns void

dataBind

When invoked, applies the pending property changes immediately to the component.

Returns void

detachUnloadEvent

Removing unload event to persist data when enable persistence true

Returns void

focusIn

Sets the focus to the component for interaction.component for interaction.

Parameter	Type	Description
e (optional)	`FocusEvent` \| `MouseEvent` \| `KeyboardEvent` \| `TouchEvent`	Specifies the event.

Returns void

focusOut

Moves the focus from the component if the component is already focused.

Parameter	Type	Description
e (optional)	`MouseEvent` \| `KeyboardEventArgs`	Specifies the event.

Returns void

getDataByValue

Gets the data Object that matches the given value.

Parameter	Type	Description
value	`string`	Specifies the value of the list item.

Returns * *{ : }**

getItems

Gets all the list items bound on this component.

Returns Element[]

getLocalData

Returns the persistence data for component

Returns any

getRootElement

Returns the route element of the component

Returns HTMLElement

handleUnload

Handling unload event to persist data when enable persistence true

Returns void

hidePopup

Hides the popup if it is in open state.

Parameter	Type	Description
e (optional)	`MouseEvent` \| `KeyboardEventArgs` \| `TouchEvent`	Specifies the event.

Returns void

refresh

Applies all the pending property changes and render the component again.

Returns void

removeEventListener

Removes the handler from the given event listener.

Parameter	Type	Description
eventName	`string`	A String that specifies the name of the event to remove
handler	`Function`	Specifies the function to remove

Returns void

showPopup

Opens the popup that displays the list of items.

Parameter	Type	Description
e (optional)	`MouseEvent` \| `KeyboardEventArgs` \| `TouchEvent`	Specifies the event.
isInputOpen (optional)	`boolean`	Specifies whether the input is open or not.