MultiColumnComboBoxComponent

1 Oct 202524 minutes to read

Represents the Essential JS 2 Angular MultiColumnComboBox Component.

<ejs-multicolumncombobox></ejs-multicolumncombobox>

Properties

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
  }];
}

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.

 <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
  }];
}

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.

 <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
  }];
}

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.

 <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
  }];
}

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.

 <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
  }];
}

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.

 <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
  }];
}

Defaults to Never

footerTemplate string|object

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.

 <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
  }];
}

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

groupTemplate string|object

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.

 <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
  }];
}

Defaults to {}

index number|null

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

Defaults to null

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
  }];
}

Defaults to null

locale string

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

Defaults to ’’

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.

 <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' }
  ];
}

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.

 <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
  }];
}

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

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

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[]

hidePopup

Hides the popup if it is in open state.

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

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.