Angular

Search results

MultiColumnComboBoxComponent

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.

Returns void

Events

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.

MultiColumnComboBoxComponent

Properties

allowFiltering boolean

allowSorting boolean

columns ColumnModel[]

cssClass string

dataSource Object | DataManager | DataResult

disabled boolean

enablePersistence boolean

enableRtl boolean

enableVirtualization boolean

fields FieldSettingsModel

filterType FilterType | string

floatLabelType FloatLabelType

footerTemplate string | object

gridSettings GridSettingsModel

groupTemplate string | object

htmlAttributes { : }

index number | null

itemTemplate string | object

locale string

placeholder string

popupHeight string | number

popupWidth string | number

query Query

readonly boolean

showClearButton boolean

sortOrder SortOrder | string

sortType SortType | string

text string

value string

width string | number

Methods

addItems

focusIn

focusOut

getDataByValue

getItems

hidePopup

showPopup

Events

actionBegin EmitType<Object>

actionComplete EmitType<Object>

actionFailure EmitType<Object>

change EmitType<ChangeEventArgs>

close EmitType<PopupEventArgs>

created EmitType<Event>

filtering EmitType<FilteringEventArgs>

open EmitType<PopupEventArgs>

select EmitType<SelectEventArgs>

allowFiltering
`boolean`

allowSorting
`boolean`

columns
`ColumnModel[]`

cssClass
`string`

dataSource
`Object` | `DataManager` | `DataResult`

disabled
`boolean`

enablePersistence
`boolean`

enableRtl
`boolean`

enableVirtualization
`boolean`

fields
`FieldSettingsModel`

filterType
`FilterType` | `string`

floatLabelType
`FloatLabelType`

footerTemplate
`string` | `object`

gridSettings
`GridSettingsModel`

groupTemplate
`string` | `object`

htmlAttributes
{ : }

index
`number` | `null`

itemTemplate
`string` | `object`

locale
`string`

placeholder
`string`

popupHeight
`string` | `number`

popupWidth
`string` | `number`

query
`Query`

readonly
`boolean`

showClearButton
`boolean`

sortOrder
`SortOrder` | `string`

sortType
`SortType` | `string`

text
`string`

value
`string`

width
`string` | `number`

actionBegin
`EmitType<Object>`

actionComplete
`EmitType<Object>`

actionFailure
`EmitType<Object>`

change
`EmitType<ChangeEventArgs>`

close
`EmitType<PopupEventArgs>`

created
`EmitType<Event>`

filtering
`EmitType<FilteringEventArgs>`

open
`EmitType<PopupEventArgs>`

select
`EmitType<SelectEventArgs>`