MultiColumnComboBoxModel
23 Sep 202524 minutes to read
Interface for a class MultiColumnComboBox
Properties
actionBegin EmitType<Object>
Triggers before fetching data from the remote server.
actionComplete EmitType<Object>
Triggers after data is fetched successfully from the remote server.
actionFailure EmitType<Object>
Triggers when the data fetch request from the remote server fails.
change EmitType<ChangeEventArgs>
Triggers when an item in a popup is selected or when the model value is changed by the user.
close EmitType<PopupEventArgs>
Triggers when the popup is closed.
created EmitType<Event>
Event callback that is raised after rendering the control.
filtering EmitType<FilteringEventArgs>
Triggers on typing a character in the component.
open EmitType<PopupEventArgs>
Triggers when the popup opens.
select EmitType<SelectEventArgs>
Triggers when an item in the popup is selected by the user either with mouse/tap or with keyboard navigation.
actionFailureTemplate string|Function
Accepts the template and assigns it to the popup content when the data fetch request from the remote server fails.
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');allowSorting boolean
Specifies whether sorting is allowed for the columns in the dropdown list.
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');cssClass string
Sets CSS classes to the root element of the component that allows customization of appearance.
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');disabled boolean
Specifies a value that indicates whether the component is disabled or not.
enablePersistence boolean
Specifies the component’s state between page reloads. If enabled, the list of states for the value will be persisted.
enableRtl boolean
Enable or disable rendering component in right to left direction.
enableVirtualization boolean
Defines whether to enable virtual scrolling in the component.
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');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');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');footerTemplate string|Function
Accepts the template design and assigns it to the footer container of the popup.
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');groupTemplate string|Function
Accepts the template design and assigns it to the group headers present in the popup list.
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');index number|null
Gets or sets the index of the selected item in the component.
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');locale string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
noRecordsTemplate string|Function
Accepts the template design and assigns it to popup list of component when no data is available on the component.
placeholder string
Specifies a short hint that describes the expected value of the multicolumn combobox component.
popupHeight string|number
Specifies the height of the popup list.
popupWidth string|number
Specifies the width of the popup list. By default, the popup width sets based on the width of the component.
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');readonly boolean
Specifies the user interactions on the component are disabled.
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.
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.
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.
text string
Gets or sets the display text of the selected item.
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');width string|number
Specifies the width of the component. By default, the component width sets based on the width of its parent container.