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

MultiColumnComboBoxModel API in React 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 | function | JSX.Element

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.

import './App.css';
import * as React from 'react';
import { MultiColumnComboBoxComponent  } from '@syncfusion/ej2-react-multicolumn-combobox';

class App extends React.Component {
  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
  }];
  public fields = { text: 'CustomerID', value: 'OrderID'},
  public columns = [
    { 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 render() {
    return (<MultiColumnComboBoxComponent  dataSource={this.dataSource}  fields={this.fields} placeholder={"Select a data"} allowFiltering={true} filterType="StartsWith" />);
  }
}

export default App;

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.

import './App.css';
import * as React from 'react';
import { MultiColumnComboBoxComponent  } from '@syncfusion/ej2-react-multicolumn-combobox';

class App extends React.Component {
  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
  }];
  public fields = { text: 'CustomerID', value: 'OrderID'},
  public columns = [
    { 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 render() {
    return (<MultiColumnComboBoxComponent  dataSource={this.dataSource}  fields={this.fields} placeholder={"Select a data"} />);
  }
}

export default App;

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.

import './App.css';
import * as React from 'react';
import { MultiColumnComboBoxComponent  } from '@syncfusion/ej2-react-multicolumn-combobox';

class App extends React.Component {
  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
  }];
  public fields = { text: 'CustomerID', value: 'OrderID'},
  public columns = [
    { 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 value = "10250";
  public render() {
    return (<MultiColumnComboBoxComponent  dataSource={this.dataSource}  fields={this.fields} placeholder={"Select a data"} value={this.value} />);
  }
}

export default App;

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.
import './App.css';
import * as React from 'react';
import { MultiColumnComboBoxComponent  } from '@syncfusion/ej2-react-multicolumn-combobox';

class App extends React.Component {
  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
  }];
  public fields = { text: 'CustomerID', value: 'OrderID'},
  public columns = [
    { 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 render() {
    return (<MultiColumnComboBoxComponent  dataSource={this.dataSource}  fields={this.fields} placeholder={"Select a data"} />);
  }
}

export default App;

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.

import './App.css';
import * as React from 'react';
import { MultiColumnComboBoxComponent  } from '@syncfusion/ej2-react-multicolumn-combobox';

class App extends React.Component {
  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
  }];
  public fields = { text: 'CustomerID', value: 'OrderID'},
  public columns = [
    { 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 render() {
    return (<MultiColumnComboBoxComponent  dataSource={this.dataSource}  fields={this.fields} placeholder={"Select a data"} allowFiltering={true} filterType="StartsWith" />);
  }
}

export default App;

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.
import './App.css';
import * as React from 'react';
import { MultiColumnComboBoxComponent  } from '@syncfusion/ej2-react-multicolumn-combobox';

class App extends React.Component {
  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
  }];
  public fields = { text: 'CustomerID', value: 'OrderID'},
  public columns = [
    { 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 render() {
    return (<MultiColumnComboBoxComponent  dataSource={this.dataSource}  fields={this.fields} placeholder={"Select a data"} floatLabelType="Auto" />);
  }
}

export default App;

footerTemplate

string | function | JSX.Element

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.

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

groupTemplate

string | function | JSX.Element

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.

import './App.css';
import * as React from 'react';
import { MultiColumnComboBoxComponent  } from '@syncfusion/ej2-react-multicolumn-combobox';

class App extends React.Component {
  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
  }];
  public fields = { text: 'CustomerID', value: 'OrderID'},
  public columns = [
    { 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 htmlAttributes = { name: "games", readonly: "readonly", title: "ComboBox" };
  public render() {
    return (<MultiColumnComboBoxComponent  dataSource={this.dataSource}  fields={this.fields} placeholder={"Select a data"} {this.htmlAttributes} value={this.value} />);
  }
}

export default App;

index

number | null

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

itemTemplate

string | function | JSX.Element

Accepts the template design and assigns it to each items present in the popup.

import './App.css';
import * as React from 'react';
import { MultiColumnComboBoxComponent  } from '@syncfusion/ej2-react-multicolumn-combobox';

class App extends React.Component {
  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
  }];
  public fields = { text: 'CustomerID', value: 'OrderID'},
  public columns = [
    { 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 render() {
    return (<MultiColumnComboBoxComponent  dataSource={this.dataSource}  fields={this.fields} placeholder={"Select a data"} itemTemplate='<span>${CustomerID}</span> --- <span>${Freight}</span> --- <span>${OrderDate}</span>' />);
  }
}

export default App;

locale

string

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

noRecordsTemplate

string | function | JSX.Element

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.

import './App.css';
import * as React from 'react';
import { MultiColumnComboBoxComponent  } from '@syncfusion/ej2-react-multicolumn-combobox';

class App extends React.Component {
  public dataSource: DataManager = new DataManager({
    url: 'https://ej2services.syncfusion.com/production/web-services/api/Employees',
    adaptor: new WebApiAdaptor,
    crossDomain: true
  });
  public fields = { text: 'FirstName', value: 'EmployeeID' };
  public query = new Query().select(['FirstName', 'EmployeeID']).take(10).requiresCount();
  public columns = [
    { field: 'FirstName', header: 'First Name', width: 120 },
    { field: 'EmployeeID', width: 140, header: 'Employee ID' }
  ];
  public render() {
    return (<MultiColumnComboBoxComponent  dataSource={this.dataSource}  fields={this.fields} placeholder={"Select a data"} query={this.query} />);
  }
}

export default App;

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.

import './App.css';
import * as React from 'react';
import { MultiColumnComboBoxComponent  } from '@syncfusion/ej2-react-multicolumn-combobox';

class App extends React.Component {
  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
  }];
  public fields = { text: 'CustomerID', value: 'OrderID'},
  public columns = [
    { 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 value = "10250";
  public render() {
    return (<MultiColumnComboBoxComponent  dataSource={this.dataSource}  fields={this.fields} placeholder={"Select a data"} value={this.value} />);
  }
}

export default App;

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 / PopupEventArgs
Multicolumn Combobox / GridSettingsModel