JavaScript

Search results

MultiColumnComboBox

The MultiColumnComboBox allows the user to search and select values from a list. It provides a list of options that can be selected using a filter input. The selected value will be displayed in the input element.

 <input type='text' id='multi-column'></input>

 let multiColObj: MultiColumnComboBox = new MultiColumnComboBox();
 multiColObj.appendTo('#multi-column');

Properties

actionFailureTemplate
`string` | `Function`

Accepts the template and assigns it to the popup content when the data fetch request from the remote server fails.

Defaults to ‘Request Failed’

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');

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.

 <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');

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.

 <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');

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.

 <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');

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.

 <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');

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.

 <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');

Defaults to Never

footerTemplate
`string` | `Function`

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.

 <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');

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

groupTemplate
`string` | `Function`

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.

 <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');

Defaults to {}

index
`number` | `null`

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

Defaults to null

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');

Defaults to null

locale
`string`

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

Defaults to ”

noRecordsTemplate
`string` | `Function`

Accepts the template design and assigns it to popup list of component when no data is available on the component.

Defaults to ‘No records found’

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.

 <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');

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.

 <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');

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

addEventListener

Adds the handler to the given event listener.

Parameter	Type	Description
eventName	`string`	A String that specifies the name of the event
handler	`Function`	Specifies the call to run when the event occurs.

Returns void

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

appendTo

Appends the control within the given HTML element

Parameter	Type	Description
selector (optional)	`string` \| `HTMLElement`	Target element where control needs to be appended

Returns void

attachUnloadEvent

Adding unload event to persist data when enable persistence true

Returns void

dataBind

When invoked, applies the pending property changes immediately to the component.

Returns void

detachUnloadEvent

Removing unload event to persist data when enable persistence true

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

getLocalData

Returns the persistence data for component

Returns any

getRootElement

Returns the route element of the component

Returns HTMLElement

handleUnload

Handling unload event to persist data when enable persistence true

Returns void

hidePopup

Hides the popup if it is in open state.

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

Returns void

refresh

Applies all the pending property changes and render the component again.

Returns void

removeEventListener

Removes the handler from the given event listener.

Parameter	Type	Description
eventName	`string`	A String that specifies the name of the event to remove
handler	`Function`	Specifies the function to remove

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

Inject

Dynamically injects the required modules to the component.

Parameter	Type	Description
moduleList	`Function[]`	?

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.

MultiColumnComboBox

Properties

actionFailureTemplate string | Function

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 | Function

gridSettings GridSettingsModel

groupTemplate string | Function

htmlAttributes { : }

index number | null

itemTemplate string | Function

locale string

noRecordsTemplate string | Function

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

addEventListener

addItems

appendTo

attachUnloadEvent

dataBind

detachUnloadEvent

focusIn

focusOut

getDataByValue

getItems

getLocalData

getRootElement

handleUnload

hidePopup

refresh

removeEventListener

showPopup

Inject

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>

actionFailureTemplate
`string` | `Function`

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` | `Function`

gridSettings
`GridSettingsModel`

groupTemplate
`string` | `Function`

htmlAttributes
{ : }

index
`number` | `null`

itemTemplate
`string` | `Function`

locale
`string`

noRecordsTemplate
`string` | `Function`

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>`