Angular
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
FREE TRIAL
DEMOS
SUPPORT
FORUM
DOWNLOAD
/ Multicolumn Combobox / MultiColumnComboBoxModel
Search results

MultiColumnComboBoxModel API in Angular Multicolumn Combobox API component

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.

Multicolumn Combobox / GridSettingsModel
Multicolumn Combobox / PopupEventArgs