Events in EJ2 JavaScript MultiColumn ComboBox control

14 Jun 202424 minutes to read

This section describes the multicolumn combobox events that will be triggered when appropriate actions are performed. The following events are available in the multicolumn combobox control.

actionBegin

The actionBegin event is triggered when actions such as sorting, filtering, grouping starts.

index.js
index.html
var empData = [ 
  { "EmpID": 1001, "Name": "Andrew Fuller", "Designation": "Team Lead", "Country": "England" },
  { "EmpID": 1002, "Name": "Robert", "Designation": "Developer", "Country": "USA" },
  { "EmpID": 1003, "Name": "Michael", "Designation": "HR", "Country": "Russia" },
  { "EmpID": 1004, "Name": "Steven Buchanan", "Designation": "Product Manager", "Country": "Ukraine" },
  { "EmpID": 1005, "Name": "Margaret Peacock", "Designation": "Developer", "Country": "Egypt" },
  { "EmpID": 1006, "Name": "Janet Leverling", "Designation": "Team Lead", "Country": "Africa" },
  { "EmpID": 1007, "Name": "Alice", "Designation": "Product Manager", "Country": "Australia" },
  { "EmpID": 1008, "Name": "Bob", "Designation": "Developer", "Country": "India" },
  { "EmpID": 1009, "Name": "John", "Designation": "Product Manager", "Country": "Ireland"},
  { "EmpID": 1010, "Name": "Mario Pontes", "Designation": "Team Lead", "Country": "South Africa" },
  { "EmpID": 1011, "Name": "Yang Wang", "Designation": "Developer", "Country": "Russia" },
  { "EmpID": 1012, "Name": "David", "Designation": "Product Manager", "Country": "Egypt" },
  { "EmpID": 1013, "Name": "Antonio Bianchi", "Designation": "Team Lead", "Country": "USA" },
  { "EmpID": 1014, "Name": "Laura", "Designation": "Developer", "Country": "England" },
  { "EmpID": 1015, "Name": "Carlos Hernandez", "Designation": "Developer", "Country": "Canada" },
  { "EmpID": 1016, "Name": "Lily", "Designation": "Product Manager", "Country": "France" },
  { "EmpID": 1017, "Name": "Tom Williams", "Designation": "Developer", "Country": "Ukraine" },
  { "EmpID": 1018, "Name": "Grace", "Designation": "Developer", "Country": "Australia" },
  { "EmpID": 1019, "Name": "Olivia", "Designation": "Team Lead", "Country": "Ireland" },
  { "EmpID": 1020, "Name": "James", "Designation": "Developer", "Country": "China" },
];

var columnsData = [
  { field: 'EmpID', header: 'Employee ID', width: 90 },
  { field: 'Name', width: 90, header: 'Name' },
  { field: 'Designation', header: 'Designation', width: 90 },
  { field: 'Country', header: 'Country', width: 70 }
];

var multiComboBoxObject = new ej.multicolumncombobox.MultiColumnComboBox({
  dataSource: empData,
  columns: columnsData,
  fields: { text: 'Name', value: 'EmpID' },
  text: 'Michael',
  actionBegin: () => {
    // Your required action here
  }
});

multiComboBoxObject.appendTo('#multicolumn');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 MultiColumn ComboBox</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/material.css" rel="stylesheet" />

    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

    <div id='container' style="margin:50px auto 0; width:500px;">
        <br>
        <input type="text" tabindex="1" id='multicolumn' />
    </div>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>

actionFailure

The actionFailure event is triggered when the data fetch request from the remote server fails.

index.js
index.html
var empData = [ 
  { "EmpID": 1001, "Name": "Andrew Fuller", "Designation": "Team Lead", "Country": "England" },
  { "EmpID": 1002, "Name": "Robert", "Designation": "Developer", "Country": "USA" },
  { "EmpID": 1003, "Name": "Michael", "Designation": "HR", "Country": "Russia" },
  { "EmpID": 1004, "Name": "Steven Buchanan", "Designation": "Product Manager", "Country": "Ukraine" },
  { "EmpID": 1005, "Name": "Margaret Peacock", "Designation": "Developer", "Country": "Egypt" },
  { "EmpID": 1006, "Name": "Janet Leverling", "Designation": "Team Lead", "Country": "Africa" },
  { "EmpID": 1007, "Name": "Alice", "Designation": "Product Manager", "Country": "Australia" },
  { "EmpID": 1008, "Name": "Bob", "Designation": "Developer", "Country": "India" },
  { "EmpID": 1009, "Name": "John", "Designation": "Product Manager", "Country": "Ireland"},
  { "EmpID": 1010, "Name": "Mario Pontes", "Designation": "Team Lead", "Country": "South Africa" },
  { "EmpID": 1011, "Name": "Yang Wang", "Designation": "Developer", "Country": "Russia" },
  { "EmpID": 1012, "Name": "David", "Designation": "Product Manager", "Country": "Egypt" },
  { "EmpID": 1013, "Name": "Antonio Bianchi", "Designation": "Team Lead", "Country": "USA" },
  { "EmpID": 1014, "Name": "Laura", "Designation": "Developer", "Country": "England" },
  { "EmpID": 1015, "Name": "Carlos Hernandez", "Designation": "Developer", "Country": "Canada" },
  { "EmpID": 1016, "Name": "Lily", "Designation": "Product Manager", "Country": "France" },
  { "EmpID": 1017, "Name": "Tom Williams", "Designation": "Developer", "Country": "Ukraine" },
  { "EmpID": 1018, "Name": "Grace", "Designation": "Developer", "Country": "Australia" },
  { "EmpID": 1019, "Name": "Olivia", "Designation": "Team Lead", "Country": "Ireland" },
  { "EmpID": 1020, "Name": "James", "Designation": "Developer", "Country": "China" },
];

var columnsData = [
  { field: 'EmpID', header: 'Employee ID', width: 90 },
  { field: 'Name', width: 90, header: 'Name' },
  { field: 'Designation', header: 'Designation', width: 90 },
  { field: 'Country', header: 'Country', width: 70 }
];

var multiComboBoxObject = new ej.multicolumncombobox.MultiColumnComboBox({
  dataSource: empData,
  columns: columnsData,
  fields: { text: 'Name', value: 'EmpID' },
  text: 'Michael',
  actionBegin: () => {
    // Your required action here
  }
});

multiComboBoxObject.appendTo('#multicolumn');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 MultiColumn ComboBox</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/material.css" rel="stylesheet" />

    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

    <div id='container' style="margin:50px auto 0; width:500px;">
        <br>
        <input type="text" tabindex="1" id='multicolumn' />
    </div>
    
    <script src="index.js" type="text/javascript"></script>
</body>

</html>

actionComplete

The actionComplete event is triggered when actions such as sorting, filtering, grouping are completed.

index.js
index.html
var empData = [ 
  { "EmpID": 1001, "Name": "Andrew Fuller", "Designation": "Team Lead", "Country": "England" },
  { "EmpID": 1002, "Name": "Robert", "Designation": "Developer", "Country": "USA" },
  { "EmpID": 1003, "Name": "Michael", "Designation": "HR", "Country": "Russia" },
  { "EmpID": 1004, "Name": "Steven Buchanan", "Designation": "Product Manager", "Country": "Ukraine" },
  { "EmpID": 1005, "Name": "Margaret Peacock", "Designation": "Developer", "Country": "Egypt" },
  { "EmpID": 1006, "Name": "Janet Leverling", "Designation": "Team Lead", "Country": "Africa" },
  { "EmpID": 1007, "Name": "Alice", "Designation": "Product Manager", "Country": "Australia" },
  { "EmpID": 1008, "Name": "Bob", "Designation": "Developer", "Country": "India" },
  { "EmpID": 1009, "Name": "John", "Designation": "Product Manager", "Country": "Ireland"},
  { "EmpID": 1010, "Name": "Mario Pontes", "Designation": "Team Lead", "Country": "South Africa" },
  { "EmpID": 1011, "Name": "Yang Wang", "Designation": "Developer", "Country": "Russia" },
  { "EmpID": 1012, "Name": "David", "Designation": "Product Manager", "Country": "Egypt" },
  { "EmpID": 1013, "Name": "Antonio Bianchi", "Designation": "Team Lead", "Country": "USA" },
  { "EmpID": 1014, "Name": "Laura", "Designation": "Developer", "Country": "England" },
  { "EmpID": 1015, "Name": "Carlos Hernandez", "Designation": "Developer", "Country": "Canada" },
  { "EmpID": 1016, "Name": "Lily", "Designation": "Product Manager", "Country": "France" },
  { "EmpID": 1017, "Name": "Tom Williams", "Designation": "Developer", "Country": "Ukraine" },
  { "EmpID": 1018, "Name": "Grace", "Designation": "Developer", "Country": "Australia" },
  { "EmpID": 1019, "Name": "Olivia", "Designation": "Team Lead", "Country": "Ireland" },
  { "EmpID": 1020, "Name": "James", "Designation": "Developer", "Country": "China" },
];

var columnsData = [
  { field: 'EmpID', header: 'Employee ID', width: 90 },
  { field: 'Name', width: 90, header: 'Name' },
  { field: 'Designation', header: 'Designation', width: 90 },
  { field: 'Country', header: 'Country', width: 70 }
];

var multiComboBoxObject = new ej.multicolumncombobox.MultiColumnComboBox({
  dataSource: empData,
  columns: columnsData,
  fields: { text: 'Name', value: 'EmpID' },
  text: 'Michael',
  actionComplete: () => {
    // Your required action here
  }
});

multiComboBoxObject.appendTo('#multicolumn');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 MultiColumn ComboBox</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/material.css" rel="stylesheet" />

    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

    <div id='container' style="margin:50px auto 0; width:500px;">
        <br>
        <input type="text" tabindex="1" id='multicolumn' />
    </div>
    
    <script src="index.js" type="text/javascript"></script>
</body>

</html>

select

The select event is triggered when the popup item is selected.

index.js
index.html
var empData = [ 
  { "EmpID": 1001, "Name": "Andrew Fuller", "Designation": "Team Lead", "Country": "England" },
  { "EmpID": 1002, "Name": "Robert", "Designation": "Developer", "Country": "USA" },
  { "EmpID": 1003, "Name": "Michael", "Designation": "HR", "Country": "Russia" },
  { "EmpID": 1004, "Name": "Steven Buchanan", "Designation": "Product Manager", "Country": "Ukraine" },
  { "EmpID": 1005, "Name": "Margaret Peacock", "Designation": "Developer", "Country": "Egypt" },
  { "EmpID": 1006, "Name": "Janet Leverling", "Designation": "Team Lead", "Country": "Africa" },
  { "EmpID": 1007, "Name": "Alice", "Designation": "Product Manager", "Country": "Australia" },
  { "EmpID": 1008, "Name": "Bob", "Designation": "Developer", "Country": "India" },
  { "EmpID": 1009, "Name": "John", "Designation": "Product Manager", "Country": "Ireland"},
  { "EmpID": 1010, "Name": "Mario Pontes", "Designation": "Team Lead", "Country": "South Africa" },
  { "EmpID": 1011, "Name": "Yang Wang", "Designation": "Developer", "Country": "Russia" },
  { "EmpID": 1012, "Name": "David", "Designation": "Product Manager", "Country": "Egypt" },
  { "EmpID": 1013, "Name": "Antonio Bianchi", "Designation": "Team Lead", "Country": "USA" },
  { "EmpID": 1014, "Name": "Laura", "Designation": "Developer", "Country": "England" },
  { "EmpID": 1015, "Name": "Carlos Hernandez", "Designation": "Developer", "Country": "Canada" },
  { "EmpID": 1016, "Name": "Lily", "Designation": "Product Manager", "Country": "France" },
  { "EmpID": 1017, "Name": "Tom Williams", "Designation": "Developer", "Country": "Ukraine" },
  { "EmpID": 1018, "Name": "Grace", "Designation": "Developer", "Country": "Australia" },
  { "EmpID": 1019, "Name": "Olivia", "Designation": "Team Lead", "Country": "Ireland" },
  { "EmpID": 1020, "Name": "James", "Designation": "Developer", "Country": "China" },
];

var columnsData = [
  { field: 'EmpID', header: 'Employee ID', width: 90 },
  { field: 'Name', width: 90, header: 'Name' },
  { field: 'Designation', header: 'Designation', width: 90 },
  { field: 'Country', header: 'Country', width: 70 }
];

var multiComboBoxObject = new ej.multicolumncombobox.MultiColumnComboBox({
  dataSource: empData,
  columns: columnsData,
  fields: { text: 'Name', value: 'EmpID' },
  text: 'Michael',
  select: (args) => {
    // Your required action here
  }
});

multiComboBoxObject.appendTo('#multicolumn');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 MultiColumn ComboBox</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/material.css" rel="stylesheet" />

    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

    <div id='container' style="margin:50px auto 0; width:500px;">
        <br>
        <input type="text" tabindex="1" id='multicolumn' />
    </div>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>

change

The change event is triggered when the popup item is selected or when the model value is changed.

index.js
index.html
var empData = [ 
  { "EmpID": 1001, "Name": "Andrew Fuller", "Designation": "Team Lead", "Country": "England" },
  { "EmpID": 1002, "Name": "Robert", "Designation": "Developer", "Country": "USA" },
  { "EmpID": 1003, "Name": "Michael", "Designation": "HR", "Country": "Russia" },
  { "EmpID": 1004, "Name": "Steven Buchanan", "Designation": "Product Manager", "Country": "Ukraine" },
  { "EmpID": 1005, "Name": "Margaret Peacock", "Designation": "Developer", "Country": "Egypt" },
  { "EmpID": 1006, "Name": "Janet Leverling", "Designation": "Team Lead", "Country": "Africa" },
  { "EmpID": 1007, "Name": "Alice", "Designation": "Product Manager", "Country": "Australia" },
  { "EmpID": 1008, "Name": "Bob", "Designation": "Developer", "Country": "India" },
  { "EmpID": 1009, "Name": "John", "Designation": "Product Manager", "Country": "Ireland"},
  { "EmpID": 1010, "Name": "Mario Pontes", "Designation": "Team Lead", "Country": "South Africa" },
  { "EmpID": 1011, "Name": "Yang Wang", "Designation": "Developer", "Country": "Russia" },
  { "EmpID": 1012, "Name": "David", "Designation": "Product Manager", "Country": "Egypt" },
  { "EmpID": 1013, "Name": "Antonio Bianchi", "Designation": "Team Lead", "Country": "USA" },
  { "EmpID": 1014, "Name": "Laura", "Designation": "Developer", "Country": "England" },
  { "EmpID": 1015, "Name": "Carlos Hernandez", "Designation": "Developer", "Country": "Canada" },
  { "EmpID": 1016, "Name": "Lily", "Designation": "Product Manager", "Country": "France" },
  { "EmpID": 1017, "Name": "Tom Williams", "Designation": "Developer", "Country": "Ukraine" },
  { "EmpID": 1018, "Name": "Grace", "Designation": "Developer", "Country": "Australia" },
  { "EmpID": 1019, "Name": "Olivia", "Designation": "Team Lead", "Country": "Ireland" },
  { "EmpID": 1020, "Name": "James", "Designation": "Developer", "Country": "China" },
];

var columnsData = [
  { field: 'EmpID', header: 'Employee ID', width: 90 },
  { field: 'Name', width: 90, header: 'Name' },
  { field: 'Designation', header: 'Designation', width: 90 },
  { field: 'Country', header: 'Country', width: 70 }
];

var multiComboBoxObject = new ej.multicolumncombobox.MultiColumnComboBox({
  dataSource: empData,
  columns: columnsData,
  fields: { text: 'Name', value: 'EmpID' },
  text: 'Michael',
  change: (args) => {
    // Your required action here
  }
});

multiComboBoxObject.appendTo('#multicolumn');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 MultiColumn ComboBox</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/material.css" rel="stylesheet" />

    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

    <div id='container' style="margin:50px auto 0; width:500px;">
        <br>
        <input type="text" tabindex="1" id='multicolumn' />
    </div>
    
    <script src="index.js" type="text/javascript"></script>
</body>

</html>

filtering

The filtering event is triggered when typing a character in the component.

index.js
index.html
var empData = [ 
  { "EmpID": 1001, "Name": "Andrew Fuller", "Designation": "Team Lead", "Country": "England" },
  { "EmpID": 1002, "Name": "Robert", "Designation": "Developer", "Country": "USA" },
  { "EmpID": 1003, "Name": "Michael", "Designation": "HR", "Country": "Russia" },
  { "EmpID": 1004, "Name": "Steven Buchanan", "Designation": "Product Manager", "Country": "Ukraine" },
  { "EmpID": 1005, "Name": "Margaret Peacock", "Designation": "Developer", "Country": "Egypt" },
  { "EmpID": 1006, "Name": "Janet Leverling", "Designation": "Team Lead", "Country": "Africa" },
  { "EmpID": 1007, "Name": "Alice", "Designation": "Product Manager", "Country": "Australia" },
  { "EmpID": 1008, "Name": "Bob", "Designation": "Developer", "Country": "India" },
  { "EmpID": 1009, "Name": "John", "Designation": "Product Manager", "Country": "Ireland"},
  { "EmpID": 1010, "Name": "Mario Pontes", "Designation": "Team Lead", "Country": "South Africa" },
  { "EmpID": 1011, "Name": "Yang Wang", "Designation": "Developer", "Country": "Russia" },
  { "EmpID": 1012, "Name": "David", "Designation": "Product Manager", "Country": "Egypt" },
  { "EmpID": 1013, "Name": "Antonio Bianchi", "Designation": "Team Lead", "Country": "USA" },
  { "EmpID": 1014, "Name": "Laura", "Designation": "Developer", "Country": "England" },
  { "EmpID": 1015, "Name": "Carlos Hernandez", "Designation": "Developer", "Country": "Canada" },
  { "EmpID": 1016, "Name": "Lily", "Designation": "Product Manager", "Country": "France" },
  { "EmpID": 1017, "Name": "Tom Williams", "Designation": "Developer", "Country": "Ukraine" },
  { "EmpID": 1018, "Name": "Grace", "Designation": "Developer", "Country": "Australia" },
  { "EmpID": 1019, "Name": "Olivia", "Designation": "Team Lead", "Country": "Ireland" },
  { "EmpID": 1020, "Name": "James", "Designation": "Developer", "Country": "China" },
];

var columnsData = [
  { field: 'EmpID', header: 'Employee ID', width: 90 },
  { field: 'Name', width: 90, header: 'Name' },
  { field: 'Designation', header: 'Designation', width: 90 },
  { field: 'Country', header: 'Country', width: 70 }
];

var multiComboBoxObject = new ej.multicolumncombobox.MultiColumnComboBox({
  dataSource: empData,
  columns: columnsData,
  fields: { text: 'Name', value: 'EmpID' },
  text: 'Michael',
  filtering: (args) => {
    // Your required action here
  }
});

multiComboBoxObject.appendTo('#multicolumn');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 MultiColumn ComboBox</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/material.css" rel="stylesheet" />

    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

    <div id='container' style="margin:50px auto 0; width:500px;">
        <br>
        <input type="text" tabindex="1" id='multicolumn' />
    </div>
    
    <script src="index.js" type="text/javascript"></script>
</body>

</html>

open

The open event is triggered when the popup is opened.

index.js
index.html
var empData = [ 
  { "EmpID": 1001, "Name": "Andrew Fuller", "Designation": "Team Lead", "Country": "England" },
  { "EmpID": 1002, "Name": "Robert", "Designation": "Developer", "Country": "USA" },
  { "EmpID": 1003, "Name": "Michael", "Designation": "HR", "Country": "Russia" },
  { "EmpID": 1004, "Name": "Steven Buchanan", "Designation": "Product Manager", "Country": "Ukraine" },
  { "EmpID": 1005, "Name": "Margaret Peacock", "Designation": "Developer", "Country": "Egypt" },
  { "EmpID": 1006, "Name": "Janet Leverling", "Designation": "Team Lead", "Country": "Africa" },
  { "EmpID": 1007, "Name": "Alice", "Designation": "Product Manager", "Country": "Australia" },
  { "EmpID": 1008, "Name": "Bob", "Designation": "Developer", "Country": "India" },
  { "EmpID": 1009, "Name": "John", "Designation": "Product Manager", "Country": "Ireland"},
  { "EmpID": 1010, "Name": "Mario Pontes", "Designation": "Team Lead", "Country": "South Africa" },
  { "EmpID": 1011, "Name": "Yang Wang", "Designation": "Developer", "Country": "Russia" },
  { "EmpID": 1012, "Name": "David", "Designation": "Product Manager", "Country": "Egypt" },
  { "EmpID": 1013, "Name": "Antonio Bianchi", "Designation": "Team Lead", "Country": "USA" },
  { "EmpID": 1014, "Name": "Laura", "Designation": "Developer", "Country": "England" },
  { "EmpID": 1015, "Name": "Carlos Hernandez", "Designation": "Developer", "Country": "Canada" },
  { "EmpID": 1016, "Name": "Lily", "Designation": "Product Manager", "Country": "France" },
  { "EmpID": 1017, "Name": "Tom Williams", "Designation": "Developer", "Country": "Ukraine" },
  { "EmpID": 1018, "Name": "Grace", "Designation": "Developer", "Country": "Australia" },
  { "EmpID": 1019, "Name": "Olivia", "Designation": "Team Lead", "Country": "Ireland" },
  { "EmpID": 1020, "Name": "James", "Designation": "Developer", "Country": "China" },
];

var columnsData = [
  { field: 'EmpID', header: 'Employee ID', width: 90 },
  { field: 'Name', width: 90, header: 'Name' },
  { field: 'Designation', header: 'Designation', width: 90 },
  { field: 'Country', header: 'Country', width: 70 }
];

var multiComboBoxObject = new ej.multicolumncombobox.MultiColumnComboBox({
  dataSource: empData,
  columns: columnsData,
  fields: { text: 'Name', value: 'EmpID' },
  text: 'Michael',
  open: (args) => {
    // Your required action here
  }
});

multiComboBoxObject.appendTo('#multicolumn');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 MultiColumn ComboBox</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/material.css" rel="stylesheet" />

    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

    <div id='container' style="margin:50px auto 0; width:500px;">
        <br>
        <input type="text" tabindex="1" id='multicolumn' />
    </div>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>

close

The close event is triggered when the popup is closed.

index.js
index.html
var empData = [ 
  { "EmpID": 1001, "Name": "Andrew Fuller", "Designation": "Team Lead", "Country": "England" },
  { "EmpID": 1002, "Name": "Robert", "Designation": "Developer", "Country": "USA" },
  { "EmpID": 1003, "Name": "Michael", "Designation": "HR", "Country": "Russia" },
  { "EmpID": 1004, "Name": "Steven Buchanan", "Designation": "Product Manager", "Country": "Ukraine" },
  { "EmpID": 1005, "Name": "Margaret Peacock", "Designation": "Developer", "Country": "Egypt" },
  { "EmpID": 1006, "Name": "Janet Leverling", "Designation": "Team Lead", "Country": "Africa" },
  { "EmpID": 1007, "Name": "Alice", "Designation": "Product Manager", "Country": "Australia" },
  { "EmpID": 1008, "Name": "Bob", "Designation": "Developer", "Country": "India" },
  { "EmpID": 1009, "Name": "John", "Designation": "Product Manager", "Country": "Ireland"},
  { "EmpID": 1010, "Name": "Mario Pontes", "Designation": "Team Lead", "Country": "South Africa" },
  { "EmpID": 1011, "Name": "Yang Wang", "Designation": "Developer", "Country": "Russia" },
  { "EmpID": 1012, "Name": "David", "Designation": "Product Manager", "Country": "Egypt" },
  { "EmpID": 1013, "Name": "Antonio Bianchi", "Designation": "Team Lead", "Country": "USA" },
  { "EmpID": 1014, "Name": "Laura", "Designation": "Developer", "Country": "England" },
  { "EmpID": 1015, "Name": "Carlos Hernandez", "Designation": "Developer", "Country": "Canada" },
  { "EmpID": 1016, "Name": "Lily", "Designation": "Product Manager", "Country": "France" },
  { "EmpID": 1017, "Name": "Tom Williams", "Designation": "Developer", "Country": "Ukraine" },
  { "EmpID": 1018, "Name": "Grace", "Designation": "Developer", "Country": "Australia" },
  { "EmpID": 1019, "Name": "Olivia", "Designation": "Team Lead", "Country": "Ireland" },
  { "EmpID": 1020, "Name": "James", "Designation": "Developer", "Country": "China" },
];

var columnsData = [
  { field: 'EmpID', header: 'Employee ID', width: 90 },
  { field: 'Name', width: 90, header: 'Name' },
  { field: 'Designation', header: 'Designation', width: 90 },
  { field: 'Country', header: 'Country', width: 70 }
];

var multiComboBoxObject = new ej.multicolumncombobox.MultiColumnComboBox({
  dataSource: empData,
  columns: columnsData,
  fields: { text: 'Name', value: 'EmpID' },
  text: 'Michael',
  close: (args) => {
    // Your required action here
  }
});

multiComboBoxObject.appendTo('#multicolumn');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 MultiColumn ComboBox</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/material.css" rel="stylesheet" />

    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

    <div id='container' style="margin:50px auto 0; width:500px;">
        <br>
        <input type="text" tabindex="1" id='multicolumn' />
    </div>
    
    <script src="index.js" type="text/javascript"></script>
</body>

</html>

Search docs

Ask HelpBot