MultiColumnComboBoxModel
1 Oct 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|object
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.
<ejs-multicolumncombobox [placeholder]="placeholder" [fields]="fields" [dataSource]="dataSource" [columns]="columns" allowFiltering="true" filterType="StartsWith"></ejs-multicolumncombobox>import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'app-root',
styleUrls: ['app.component.css'],
templateUrl: 'app.component.html',
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
public placeholder = "Select a data";
public fields = { text: 'CustomerID', value: 'OrderID'},
public 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 }
];
public dataSource: { [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
}];
}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.
<ejs-multicolumncombobox [placeholder]="placeholder" [fields]="fields" [dataSource]="dataSource" [columns]="columns"></ejs-multicolumncombobox>import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'app-root',
styleUrls: ['app.component.css'],
templateUrl: 'app.component.html',
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
public placeholder = "Select a data";
public fields = { text: 'CustomerID', value: 'OrderID'},
public 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 }
];
public dataSource: { [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
}];
}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.
<ejs-multicolumncombobox [placeholder]="placeholder" [fields]="fields" [dataSource]="dataSource" [columns]="columns" [value]="value"></ejs-multicolumncombobox>import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'app-root',
styleUrls: ['app.component.css'],
templateUrl: 'app.component.html',
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
public placeholder = "Select a data";
public fields = { text: 'CustomerID', value: 'OrderID'},
public value = "10250";
public 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 }
];
public dataSource: { [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
}];
}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.
<ejs-multicolumncombobox [placeholder]="placeholder" [fields]="fields" [dataSource]="dataSource" [columns]="columns"></ejs-multicolumncombobox>import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'app-root',
styleUrls: ['app.component.css'],
templateUrl: 'app.component.html',
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
public placeholder = "Select a data";
public fields = { text: 'CustomerID', value: 'OrderID'},
public 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 }
];
public dataSource: { [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
}];
}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.
<ejs-multicolumncombobox [placeholder]="placeholder" [fields]="fields" [dataSource]="dataSource" [columns]="columns" allowFiltering="true" filterType="StartsWith"></ejs-multicolumncombobox>import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'app-root',
styleUrls: ['app.component.css'],
templateUrl: 'app.component.html',
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
public placeholder = "Select a data";
public fields = { text: 'CustomerID', value: 'OrderID'},
public 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 }
];
public dataSource: { [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
}];
}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.
<ejs-multicolumncombobox [placeholder]="placeholder" [fields]="fields" [dataSource]="dataSource" [columns]="columns" floatLabelType="Auto"></ejs-multicolumncombobox>import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'app-root',
styleUrls: ['app.component.css'],
templateUrl: 'app.component.html',
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
public placeholder = "Select a data";
public fields = { text: 'CustomerID', value: 'OrderID'},
public 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 }
];
public dataSource: { [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
}];
}footerTemplate string|object
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.
<ejs-multicolumncombobox [placeholder]="placeholder" [fields]="fields" [dataSource]="dataSource" [columns]="columns" [gridSettings]="gridSettings"></ejs-multicolumncombobox>import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'app-root',
styleUrls: ['app.component.css'],
templateUrl: 'app.component.html',
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
public placeholder = "Select a data";
public fields = { text: 'CustomerID', value: 'OrderID'},
public gridSettings = { rowHeight: 40, enableAltRow: true, gridLines: 'Horizontal'},
public 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 }
];
public dataSource: { [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
}];
}groupTemplate string|object
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.
<ejs-multicolumncombobox [placeholder]="placeholder" [fields]="fields" [dataSource]="dataSource" [columns]="columns" [htmlAttributes]="htmlAttributes"></ejs-multicolumncombobox>import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'app-root',
styleUrls: ['app.component.css'],
templateUrl: 'app.component.html',
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
public placeholder = "Select a data";
public htmlAttributes = { name: "games", title: "multicolumncombobox" };
public fields = { text: 'CustomerID', value: 'OrderID'},
public 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 }
];
public dataSource: { [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
}];
}index number|null
Gets or sets the index of the selected item in the component.
itemTemplate string|object
Accepts the template design and assigns it to each items present in the popup.
<ejs-multicolumncombobox [placeholder]="placeholder" [fields]="fields" [dataSource]="dataSource" [columns]="columns" [itemTemplate]='<span>${CustomerID}</span> --- <span>${Freight}</span> --- <span>${OrderDate}</span>'></ejs-multicolumncombobox>import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'app-root',
styleUrls: ['app.component.css'],
templateUrl: 'app.component.html',
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
public placeholder = "Select a data";
public fields = { text: 'CustomerID', value: 'OrderID'},
public 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 }
];
public dataSource: { [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
}];
}locale string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
noRecordsTemplate string|object
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.
<ejs-multicolumncombobox [placeholder]="placeholder" [fields]="fields" [dataSource]="dataSource" [columns]="columns" [query]="query"></ejs-multicolumncombobox>import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'app-root',
styleUrls: ['app.component.css'],
templateUrl: 'app.component.html',
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
public dataSource: DataManager = new DataManager({
url: 'https://ej2services.syncfusion.com/production/web-services/api/Employees',
adaptor: new WebApiAdaptor,
crossDomain: true
});
public query = new Query().select(['FirstName', 'EmployeeID']).take(10).requiresCount();
public placeholder = "Select a name";
public fields = { text: 'FirstName', value: 'EmployeeID' };
public columns: ColumnModel[] = [
{ field: 'FirstName', header: 'First Name', width: 120 },
{ field: 'EmployeeID', width: 140, header: 'Employee ID' }
];
}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.
<ejs-multicolumncombobox [placeholder]="placeholder" [fields]="fields" [dataSource]="dataSource" [columns]="columns" [value]="value"></ejs-multicolumncombobox>import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'app-root',
styleUrls: ['app.component.css'],
templateUrl: 'app.component.html',
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor() {}
public placeholder = "Select a data";
public fields = { text: 'CustomerID', value: 'OrderID'},
public value = "10250";
public 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 }
];
public dataSource: { [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
}];
}width string|number
Specifies the width of the component. By default, the component width sets based on the width of its parent container.