Columns in EJ2 JavaScript MultiColumn ComboBox control

31 Jan 202524 minutes to read

The columns property allow you to define the data fields to be displayed in the MultiColumn ComboBox.

You can customize the column by using ColumnModel, which provides options such as field, header, width, format, template and more.

field - Specifies the fields to be displayed in each column, mapped from the data source to the multicolumn combobox.
header - Specifes the data to be displayed in the column header.
width - Specifes the column width.

In the following example, the column is customized with field, header and width properties.

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

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/31.1.17/material.css" rel="stylesheet" />

    <script src="https://cdn.syncfusion.com/ej2/31.1.17/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>

Setting text align

You can use the textAlign property to define the text alignment of the column.

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', textAlign: 'Right' },
  { 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'
});

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/31.1.17/material.css" rel="stylesheet" />

    <script src="https://cdn.syncfusion.com/ej2/31.1.17/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>

Setting template

You can use the template property to customize the each cell of the column. It accepts either a template string or an HTML element.

index.js
index.html
var data = [ 
  { "Name": "Andrew Fuller", "Eimg": 7, "Designation": "Team Lead", "Country": "England", "DateofJoining": "12/10/2010" },
  { "Name": "Anne Dodsworth", "Eimg": 1, "Designation": "Developer", "Country": "USA", "DateofJoining": "10/05/2000" },
  { "Name": "Janet Leverling", "Eimg": 3, "Designation": "HR", "Country": "Russia", "DateofJoining": "23/02/2016" },
  { "Name": "Laura Callahan", "Eimg": 2, "Designation": "Product Manager", "Country": "Ukraine", "DateofJoining": "30/1/2012" },
  { "Name": "Margaret Peacock", "Eimg": 6, "Designation": "Developer", "Country": "Egypt", "DateofJoining": "15/08/2014" },
  { "Name": "Michael Suyama", "Eimg": 9, "Designation": "Team Lead", "Country": "Africa", "DateofJoining": "27/07/2015" },
  { "Name": "Nancy Davolio", "Eimg": 4, "Designation": "Product Manager", "Country": "Australia", "DateofJoining": "24/05/2017" },
  { "Name": "Robert King", "Eimg": 8, "Designation": "Developer ", "Country": "India", "DateofJoining": "08/09/2018" },
  { "Name": "Steven Buchanan", "Eimg": 10, "Designation": "CEO", "Country": "Ireland", "DateofJoining": "05/03/2020" }
];

var Columns = [
  { field: 'Eimg', header: 'Photos', width: 90, template: '<div><img class="empImage" src="https://ej2.syncfusion.com/demos/src/multicolumn-combobox/Employees/${Eimg}.png" alt="employee"/> </div>'},
  { field: 'Name', header: 'Employee Name', width: 160, template: '<div class="ename"> ${Name} </div> <div class="job"> ${Designation} </div>' },
  { field: 'DateofJoining', header: 'Date Of Joining', width: 165, template: '<div class="dateOfJoining"> ${DateofJoining} </div>' },
  { field: 'Country', header: 'Country', width: 100, template: '<div class="country"> ${Country} </div>' }
];

var multiComboBoxObject = new ej.multicolumncombobox.MultiColumnComboBox({
  dataSource: data,
  columns: Columns,
  fields: { text: 'Name', value: 'Eimg' },
  placeholder: 'Select an employee',
  popupHeight: '230px',
  cssClass: 'multicolumn-customize',
  gridSettings: { rowHeight: 40 }
});

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="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/material.css" rel="stylesheet" />

    <script src="https://cdn.syncfusion.com/ej2/31.1.17/dist/ej2.min.js" type="text/javascript"></script>
    <style>
        .multicolumn-customize .ename {
            opacity: .87;
            font-size: 16px;
            margin-top: 8px;
        }

        .multicolumn-customize .country {
            opacity: .87;
            font-size: 16px;
        }

        .multicolumn-customize .job {
            opacity: .54;
            font-size: 14px;
            margin-top: 15px;
            margin-bottom: 7px;
        }

        .multicolumn-customize .empImage {
            margin: 6px 16px;
            float: left;
            width: 50px;
            height: 50px;
        }
    </style>
<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>

Setting display as checkBox

You can use displayAsCheckBox property to display the column value as checkbox instead of a boolean value. By default, the value is false.

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, displayAsCheckBox: true },
  { 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'
});

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/31.1.17/material.css" rel="stylesheet" />

    <script src="https://cdn.syncfusion.com/ej2/31.1.17/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>

Setting custom attributes

You can use the customAttributes property to customize the CSS styles and attributes of each column’s content cells.

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', customAttributes: { class: 'e-custom-multicolumn' } },
  { 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'
});

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="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/material.css" rel="stylesheet" />

    <script src="https://cdn.syncfusion.com/ej2/31.1.17/dist/ej2.min.js" type="text/javascript"></script>
    <style>
        .e-custom-multicolumn {
            font-weight: bolder;
        }
    </style>
<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