Contents
Items in Vue ComboBox component
19 Jun 202424 minutes to read
Setting text
You can use text property to set the display text of the selected item.
<template>
<div id="app">
<div id='container' style="margin:50px auto 0; width:500px;">
<br>
<ejs-multicolumncombobox id='multicolumn' :dataSource='empData' :fields='fields' text='Michael'>
<e-columns>
<e-column field='EmpID' header='Employee ID' width='90'></e-column>
<e-column field='Name' header='Name' width='90'></e-column>
<e-column field='Designation' header='Designation' width='90'></e-column>
<e-column field='Country' header='Country' width='70'></e-column>
</e-columns>
</ejs-multicolumncombobox>
</div>
</div>
</template>
<script setup>
import { MultiColumnComboBoxComponent as EjsMulticolumncombobox } from "@syncfusion/ej2-vue-multicolumn-combobox";
import { ColumnsDirective as EColumns, ColumnDirective as EColumn } from "@syncfusion/ej2-vue-multicolumn-combobox";
const 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" }
];
const fields = { text: 'Name', value: 'EmpID' };
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-multicolumn-combobox/styles/material.css";
</style><template>
<div id="app">
<div id='container' style="margin:50px auto 0; width:500px;">
<br>
<ejs-multicolumncombobox id='multicolumn' :dataSource='empData' :fields='fields' text='Michael'>
<e-columns>
<e-column field='EmpID' header='Employee ID' width='90'></e-column>
<e-column field='Name' header='Name' width='90'></e-column>
<e-column field='Designation' header='Designation' width='90'></e-column>
<e-column field='Country' header='Country' width='70'></e-column>
</e-columns>
</ejs-multicolumncombobox>
</div>
</div>
</template>
<script>
import { MultiColumnComboBoxComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-vue-multicolumn-combobox";
export default {
components: {
'ejs-multicolumncombobox': MultiColumnComboBoxComponent,
'e-columns': ColumnsDirective,
'e-column': ColumnDirective,
},
data () {
return {
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" }
],
fields: { text: 'Name', value: 'EmpID' }
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-multicolumn-combobox/styles/material.css";
</style>Setting value
You can use value property to set the value of the selected item.
<template>
<div id="app">
<div id='container' style="margin:50px auto 0; width:500px;">
<br>
<ejs-multicolumncombobox id='multicolumn' :dataSource='empData' :fields='fields' value='1015'>
<e-columns>
<e-column field='EmpID' header='Employee ID' width='90'></e-column>
<e-column field='Name' header='Name' width='90'></e-column>
<e-column field='Designation' header='Designation' width='90'></e-column>
<e-column field='Country' header='Country' width='70'></e-column>
</e-columns>
</ejs-multicolumncombobox>
</div>
</div>
</template>
<script setup>
import { MultiColumnComboBoxComponent as EjsMulticolumncombobox } from "@syncfusion/ej2-vue-multicolumn-combobox";
import { ColumnsDirective as EColumns, ColumnDirective as EColumn } from "@syncfusion/ej2-vue-multicolumn-combobox";
const 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" }
];
const fields = { text: 'Name', value: 'EmpID' };
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-multicolumn-combobox/styles/material.css";
</style><template>
<div id="app">
<div id='container' style="margin:50px auto 0; width:500px;">
<br>
<ejs-multicolumncombobox id='multicolumn' :dataSource='empData' :fields='fields' value='1015'>
<e-columns>
<e-column field='EmpID' header='Employee ID' width='90'></e-column>
<e-column field='Name' header='Name' width='90'></e-column>
<e-column field='Designation' header='Designation' width='90'></e-column>
<e-column field='Country' header='Country' width='70'></e-column>
</e-columns>
</ejs-multicolumncombobox>
</div>
</div>
</template>
<script>
import { MultiColumnComboBoxComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-vue-multicolumn-combobox";
export default {
components: {
'ejs-multicolumncombobox': MultiColumnComboBoxComponent,
'e-columns': ColumnsDirective,
'e-column': ColumnDirective,
},
data () {
return {
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" }
],
fields: { text: 'Name', value: 'EmpID' }
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-multicolumn-combobox/styles/material.css";
</style>Setting index
You can use index property to set the index of the selected item.
<template>
<div id="app">
<div id='container' style="margin:50px auto 0; width:500px;">
<br>
<ejs-multicolumncombobox id='multicolumn' :dataSource='empData' :fields='fields' index='1'>
<e-columns>
<e-column field='EmpID' header='Employee ID' width='90'></e-column>
<e-column field='Name' header='Name' width='90'></e-column>
<e-column field='Designation' header='Designation' width='90'></e-column>
<e-column field='Country' header='Country' width='70'></e-column>
</e-columns>
</ejs-multicolumncombobox>
</div>
</div>
</template>
<script setup>
import { MultiColumnComboBoxComponent as EjsMulticolumncombobox } from "@syncfusion/ej2-vue-multicolumn-combobox";
import { ColumnsDirective as EColumns, ColumnDirective as EColumn } from "@syncfusion/ej2-vue-multicolumn-combobox";
const 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" }
];
const fields = { text: 'Name', value: 'EmpID' };
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-multicolumn-combobox/styles/material.css";
</style><template>
<div id="app">
<div id='container' style="margin:50px auto 0; width:500px;">
<br>
<ejs-multicolumncombobox id='multicolumn' :dataSource='empData' :fields='fields' index='1'>
<e-columns>
<e-column field='EmpID' header='Employee ID' width='90'></e-column>
<e-column field='Name' header='Name' width='90'></e-column>
<e-column field='Designation' header='Designation' width='90'></e-column>
<e-column field='Country' header='Country' width='70'></e-column>
</e-columns>
</ejs-multicolumncombobox>
</div>
</div>
</template>
<script>
import { MultiColumnComboBoxComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-vue-multicolumn-combobox";
export default {
components: {
'ejs-multicolumncombobox': MultiColumnComboBoxComponent,
'e-columns': ColumnsDirective,
'e-column': ColumnDirective,
},
data () {
return {
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" }
],
fields: { text: 'Name', value: 'EmpID' }
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-multicolumn-combobox/styles/material.css";
</style>Adding query
The query property is used to accept the external query, which will execute along with the data processing.
<template>
<div id="app">
<div id='container' style="margin:50px auto 0; width:500px;">
<br>
<ejs-multicolumncombobox id='multicolumn' :dataSource='empData' :fields='fields' :query='query'>
<e-columns>
<e-column field='EmpID' header='Employee ID' width='90'></e-column>
<e-column field='Name' header='Name' width='90'></e-column>
<e-column field='Designation' header='Designation' width='90'></e-column>
<e-column field='Country' header='Country' width='70'></e-column>
</e-columns>
</ejs-multicolumncombobox>
</div>
</div>
</template>
<script setup>
import { MultiColumnComboBoxComponent as EjsMulticolumncombobox } from "@syncfusion/ej2-vue-multicolumn-combobox";
import { ColumnsDirective as EColumns, ColumnDirective as EColumn } from "@syncfusion/ej2-vue-multicolumn-combobox";
import { Query } from '@syncfusion/ej2-data';
const 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" }
];
const fields = { text: 'Name', value: 'EmpID' };
const query = new Query().select(['Name', 'EmpID', 'Designation', 'Country']).take(7);
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-multicolumn-combobox/styles/material.css";
</style><template>
<div id="app">
<div id='container' style="margin:50px auto 0; width:500px;">
<br>
<ejs-multicolumncombobox id='multicolumn' :dataSource='empData' :fields='fields' :query='query'>
<e-columns>
<e-column field='EmpID' header='Employee ID' width='90'></e-column>
<e-column field='Name' header='Name' width='90'></e-column>
<e-column field='Designation' header='Designation' width='90'></e-column>
<e-column field='Country' header='Country' width='70'></e-column>
</e-columns>
</ejs-multicolumncombobox>
</div>
</div>
</template>
<script>
import { MultiColumnComboBoxComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-vue-multicolumn-combobox";
import { Query } from '@syncfusion/ej2-data';
export default {
components: {
'ejs-multicolumncombobox': MultiColumnComboBoxComponent,
'e-columns': ColumnsDirective,
'e-column': ColumnDirective,
},
data () {
return {
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" }
],
fields: { text: 'Name', value: 'EmpID' },
query: new Query().select(['Name', 'EmpID', 'Designation', 'Country']).take(7)
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-multicolumn-combobox/styles/material.css";
</style>Adding placeholder
You can use the placeholder property to set a short hint that describes the expected value in the multicolumn combobox component.
<template>
<div id="app">
<div id='container' style="margin:50px auto 0; width:500px;">
<br>
<ejs-multicolumncombobox id='multicolumn' :dataSource='empData' :fields='fields' placeholder='Select an engineer'>
<e-columns>
<e-column field='EmpID' header='Employee ID' width='90'></e-column>
<e-column field='Name' header='Name' width='90'></e-column>
<e-column field='Designation' header='Designation' width='90'></e-column>
<e-column field='Country' header='Country' width='70'></e-column>
</e-columns>
</ejs-multicolumncombobox>
</div>
</div>
</template>
<script setup>
import { MultiColumnComboBoxComponent as EjsMulticolumncombobox } from "@syncfusion/ej2-vue-multicolumn-combobox";
import { ColumnsDirective as EColumns, ColumnDirective as EColumn } from "@syncfusion/ej2-vue-multicolumn-combobox";
const 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" }
];
const fields = { text: 'Name', value: 'EmpID' };
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-multicolumn-combobox/styles/material.css";
</style><template>
<div id="app">
<div id='container' style="margin:50px auto 0; width:500px;">
<br>
<ejs-multicolumncombobox id='multicolumn' :dataSource='empData' :fields='fields' placeholder='Select an engineer'>
<e-columns>
<e-column field='EmpID' header='Employee ID' width='90'></e-column>
<e-column field='Name' header='Name' width='90'></e-column>
<e-column field='Designation' header='Designation' width='90'></e-column>
<e-column field='Country' header='Country' width='70'></e-column>
</e-columns>
</ejs-multicolumncombobox>
</div>
</div>
</template>
<script>
import { MultiColumnComboBoxComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-vue-multicolumn-combobox";
export default {
components: {
'ejs-multicolumncombobox': MultiColumnComboBoxComponent,
'e-columns': ColumnsDirective,
'e-column': ColumnDirective,
},
data () {
return {
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" }
],
fields: { text: 'Name', value: 'EmpID' }
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-multicolumn-combobox/styles/material.css";
</style>Setting the floatlabel type
You can use the floatLabelType property to display a floating label above the input element. This will work when a placeholder is used.
You can change the floatLabelType type to Never, Always, Auto.
- 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.
The following example shows the floatLabelType with Auto
<template>
<div id="app">
<div id='container' style="margin:50px auto 0; width:500px;">
<br>
<ejs-multicolumncombobox id='multicolumn' :dataSource='empData' :fields='fields' placeholder="Select a employee" floatLabelType='Auto'>
<e-columns>
<e-column field='EmpID' header='Employee ID' width='90'></e-column>
<e-column field='Name' header='Name' width='90'></e-column>
<e-column field='Designation' header='Designation' width='90'></e-column>
<e-column field='Country' header='Country' width='70'></e-column>
</e-columns>
</ejs-multicolumncombobox>
</div>
</div>
</template>
<script setup>
import { MultiColumnComboBoxComponent as EjsMulticolumncombobox } from "@syncfusion/ej2-vue-multicolumn-combobox";
import { ColumnsDirective as EColumns, ColumnDirective as EColumn } from "@syncfusion/ej2-vue-multicolumn-combobox";
const 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" }
];
const fields = { text: 'Name', value: 'EmpID' };
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-multicolumn-combobox/styles/material.css";
</style><template>
<div id="app">
<div id='container' style="margin:50px auto 0; width:500px;">
<br>
<ejs-multicolumncombobox id='multicolumn' :dataSource='empData' :fields='fields' placeholder="Select a employee" floatLabelType='Auto'>
<e-columns>
<e-column field='EmpID' header='Employee ID' width='90'></e-column>
<e-column field='Name' header='Name' width='90'></e-column>
<e-column field='Designation' header='Designation' width='90'></e-column>
<e-column field='Country' header='Country' width='70'></e-column>
</e-columns>
</ejs-multicolumncombobox>
</div>
</div>
</template>
<script>
import { MultiColumnComboBoxComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-vue-multicolumn-combobox";
export default {
components: {
'ejs-multicolumncombobox': MultiColumnComboBoxComponent,
'e-columns': ColumnsDirective,
'e-column': ColumnDirective,
},
data () {
return {
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" }
],
fields: { text: 'Name', value: 'EmpID' }
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-multicolumn-combobox/styles/material.css";
</style>Adding html attributes
You can use the htmlAttributes property to add HTML attributes to the multicolumn combobox.
<template>
<div id="app">
<div id='container' style="margin:50px auto 0; width:500px;">
<br>
<ejs-multicolumncombobox id='multicolumn' :dataSource='empData' :fields='fields' :htmlAttributes='htmlAttributes'>
<e-columns>
<e-column field='EmpID' header='Employee ID' width='90'></e-column>
<e-column field='Name' header='Name' width='90'></e-column>
<e-column field='Designation' header='Designation' width='90'></e-column>
<e-column field='Country' header='Country' width='70'></e-column>
</e-columns>
</ejs-multicolumncombobox>
</div>
</div>
</template>
<script setup>
import { MultiColumnComboBoxComponent as EjsMulticolumncombobox } from "@syncfusion/ej2-vue-multicolumn-combobox";
import { ColumnsDirective as EColumns, ColumnDirective as EColumn } from "@syncfusion/ej2-vue-multicolumn-combobox";
const 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" }
];
const fields = { text: 'Name', value: 'EmpID' };
const htmlAttributes = { title: "Select a employee" };
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-multicolumn-combobox/styles/material.css";
</style><template>
<div id="app">
<div id='container' style="margin:50px auto 0; width:500px;">
<br>
<ejs-multicolumncombobox id='multicolumn' :dataSource='empData' :fields='fields' :htmlAttributes='htmlAttributes'>
<e-columns>
<e-column field='EmpID' header='Employee ID' width='90'></e-column>
<e-column field='Name' header='Name' width='90'></e-column>
<e-column field='Designation' header='Designation' width='90'></e-column>
<e-column field='Country' header='Country' width='70'></e-column>
</e-columns>
</ejs-multicolumncombobox>
</div>
</div>
</template>
<script>
import { MultiColumnComboBoxComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-vue-multicolumn-combobox";
export default {
components: {
'ejs-multicolumncombobox': MultiColumnComboBoxComponent,
'e-columns': ColumnsDirective,
'e-column': ColumnDirective,
},
data () {
return {
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" }
],
fields: { text: 'Name', value: 'EmpID' },
htmlAttributes: { title: "Select a employee" }
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-multicolumn-combobox/styles/material.css";
</style>Setting width
You can use the width property to set the width of the component. By default, the width is determined by the width of its parent container.
<template>
<div id="app">
<div id='container' style="margin:50px auto 0; width:500px;">
<br>
<ejs-multicolumncombobox id='multicolumn' :dataSource='empData' :fields='fields' width='500px'>
<e-columns>
<e-column field='EmpID' header='Employee ID' width='90'></e-column>
<e-column field='Name' header='Name' width='90'></e-column>
<e-column field='Designation' header='Designation' width='90'></e-column>
<e-column field='Country' header='Country' width='70'></e-column>
</e-columns>
</ejs-multicolumncombobox>
</div>
</div>
</template>
<script setup>
import { MultiColumnComboBoxComponent as EjsMulticolumncombobox } from "@syncfusion/ej2-vue-multicolumn-combobox";
import { ColumnsDirective as EColumns, ColumnDirective as EColumn } from "@syncfusion/ej2-vue-multicolumn-combobox";
const 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" }
];
const fields = { text: 'Name', value: 'EmpID' };
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-multicolumn-combobox/styles/material.css";
</style><template>
<div id="app">
<div id='container' style="margin:50px auto 0; width:500px;">
<br>
<ejs-multicolumncombobox id='multicolumn' :dataSource='empData' :fields='fields' width='500px'>
<e-columns>
<e-column field='EmpID' header='Employee ID' width='90'></e-column>
<e-column field='Name' header='Name' width='90'></e-column>
<e-column field='Designation' header='Designation' width='90'></e-column>
<e-column field='Country' header='Country' width='70'></e-column>
</e-columns>
</ejs-multicolumncombobox>
</div>
</div>
</template>
<script>
import { MultiColumnComboBoxComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-vue-multicolumn-combobox";
export default {
components: {
'ejs-multicolumncombobox': MultiColumnComboBoxComponent,
'e-columns': ColumnsDirective,
'e-column': ColumnDirective,
},
data () {
return {
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" }
],
fields: { text: 'Name', value: 'EmpID' }
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-multicolumn-combobox/styles/material.css";
</style>Setting popup width
You can use the popupWidth property to set the width of the popup list. By default, the popup width is determined by the width of the component.
<template>
<div id="app">
<div id='container' style="margin:50px auto 0; width:500px;">
<br>
<ejs-multicolumncombobox id='multicolumn' :dataSource='empData' :fields='fields' text='Michael' popupWidth='400px'>
<e-columns>
<e-column field='EmpID' header='Employee ID' width='90'></e-column>
<e-column field='Name' header='Name' width='90'></e-column>
<e-column field='Designation' header='Designation' width='90'></e-column>
<e-column field='Country' header='Country' width='70'></e-column>
</e-columns>
</ejs-multicolumncombobox>
</div>
</div>
</template>
<script setup>
import { MultiColumnComboBoxComponent as EjsMulticolumncombobox } from "@syncfusion/ej2-vue-multicolumn-combobox";
import { ColumnsDirective as EColumns, ColumnDirective as EColumn } from "@syncfusion/ej2-vue-multicolumn-combobox";
const 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" }
];
const fields = { text: 'Name', value: 'EmpID' };
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-multicolumn-combobox/styles/material.css";
</style><template>
<div id="app">
<div id='container' style="margin:50px auto 0; width:500px;">
<br>
<ejs-multicolumncombobox id='multicolumn' :dataSource='empData' :fields='fields' text='Micheal' popupWidth='400px'>
<e-columns>
<e-column field='EmpID' header='Employee ID' width='90'></e-column>
<e-column field='Name' header='Name' width='90'></e-column>
<e-column field='Designation' header='Designation' width='90'></e-column>
<e-column field='Country' header='Country' width='70'></e-column>
</e-columns>
</ejs-multicolumncombobox>
</div>
</div>
</template>
<script>
import { MultiColumnComboBoxComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-vue-multicolumn-combobox";
export default {
components: {
'ejs-multicolumncombobox': MultiColumnComboBoxComponent,
'e-columns': ColumnsDirective,
'e-column': ColumnDirective,
},
data () {
return {
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" }
],
fields: { text: 'Name', value: 'EmpID' }
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-multicolumn-combobox/styles/material.css";
</style>Setting popup height
You can use the popupHeight property to set the height of the popup list. By default, the value is 300px.
<template>
<div id="app">
<div id='container' style="margin:50px auto 0; width:500px;">
<br>
<ejs-multicolumncombobox id='multicolumn' :dataSource='empData' :fields='fields' text='Michael' popupHeight='400px'>
<e-columns>
<e-column field='EmpID' header='Employee ID' width='90'></e-column>
<e-column field='Name' header='Name' width='90'></e-column>
<e-column field='Designation' header='Designation' width='90'></e-column>
<e-column field='Country' header='Country' width='70'></e-column>
</e-columns>
</ejs-multicolumncombobox>
</div>
</div>
</template>
<script setup>
import { MultiColumnComboBoxComponent as EjsMulticolumncombobox } from "@syncfusion/ej2-vue-multicolumn-combobox";
import { ColumnsDirective as EColumns, ColumnDirective as EColumn } from "@syncfusion/ej2-vue-multicolumn-combobox";
const 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" }
];
const fields = { text: 'Name', value: 'EmpID' };
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-multicolumn-combobox/styles/material.css";
</style><template>
<div id="app">
<div id='container' style="margin:50px auto 0; width:500px;">
<br>
<ejs-multicolumncombobox id='multicolumn' :dataSource='empData' :fields='fields' text='Michael' popupHeight='400px'>
<e-columns>
<e-column field='EmpID' header='Employee ID' width='90'></e-column>
<e-column field='Name' header='Name' width='90'></e-column>
<e-column field='Designation' header='Designation' width='90'></e-column>
<e-column field='Country' header='Country' width='70'></e-column>
</e-columns>
</ejs-multicolumncombobox>
</div>
</div>
</template>
<script>
import { MultiColumnComboBoxComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-vue-multicolumn-combobox";
export default {
components: {
'ejs-multicolumncombobox': MultiColumnComboBoxComponent,
'e-columns': ColumnsDirective,
'e-column': ColumnDirective,
},
data () {
return {
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" }
],
fields: { text: 'Name', value: 'EmpID' }
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-multicolumn-combobox/styles/material.css";
</style>Adding clear button
The showClearButton property is used to specify whether to show or hide the clear button. By default, its value is false. When the clear button is clicked, the value, text and index properties are reset to null.
<template>
<div id="app">
<div id='container' style="margin:50px auto 0; width:500px;">
<br>
<ejs-multicolumncombobox id='multicolumn' :dataSource='empData' :fields='fields' text='Michael' showClearButton='true'>
<e-columns>
<e-column field='EmpID' header='Employee ID' width='90'></e-column>
<e-column field='Name' header='Name' width='90'></e-column>
<e-column field='Designation' header='Designation' width='90'></e-column>
<e-column field='Country' header='Country' width='70'></e-column>
</e-columns>
</ejs-multicolumncombobox>
</div>
</div>
</template>
<script setup>
import { MultiColumnComboBoxComponent as EjsMulticolumncombobox } from "@syncfusion/ej2-vue-multicolumn-combobox";
import { ColumnsDirective as EColumns, ColumnDirective as EColumn } from "@syncfusion/ej2-vue-multicolumn-combobox";
const 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" }
];
const fields = { text: 'Name', value: 'EmpID' };
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-multicolumn-combobox/styles/material.css";
</style><template>
<div id="app">
<div id='container' style="margin:50px auto 0; width:500px;">
<br>
<ejs-multicolumncombobox id='multicolumn' :dataSource='empData' :fields='fields' text='Michael' showClearButton='true'>
<e-columns>
<e-column field='EmpID' header='Employee ID' width='90'></e-column>
<e-column field='Name' header='Name' width='90'></e-column>
<e-column field='Designation' header='Designation' width='90'></e-column>
<e-column field='Country' header='Country' width='70'></e-column>
</e-columns>
</ejs-multicolumncombobox>
</div>
</div>
</template>
<script>
import { MultiColumnComboBoxComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-vue-multicolumn-combobox";
export default {
components: {
'ejs-multicolumncombobox': MultiColumnComboBoxComponent,
'e-columns': ColumnsDirective,
'e-column': ColumnDirective,
},
data () {
return {
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" }
],
fields: { text: 'Name', value: 'EmpID' }
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-multicolumn-combobox/styles/material.css";
</style>CssClass
You can use the cssClass property to customize the multicolumn combobox component.
<template>
<div id="app">
<div id='container' style="margin:50px auto 0; width:500px;">
<br>
<ejs-multicolumncombobox id='multicolumn' :dataSource='empData' :fields='fields' text='Michael' cssClass='e-custom-multi-column'>
<e-columns>
<e-column field='EmpID' header='Employee ID' width='90'></e-column>
<e-column field='Name' header='Name' width='90'></e-column>
<e-column field='Designation' header='Designation' width='90'></e-column>
<e-column field='Country' header='Country' width='70'></e-column>
</e-columns>
</ejs-multicolumncombobox>
</div>
</div>
</template>
<script setup>
import { MultiColumnComboBoxComponent as EjsMulticolumncombobox } from "@syncfusion/ej2-vue-multicolumn-combobox";
import { ColumnsDirective as EColumns, ColumnDirective as EColumn } from "@syncfusion/ej2-vue-multicolumn-combobox";
const 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" }
];
const fields = { text: 'Name', value: 'EmpID' };
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-multicolumn-combobox/styles/material.css";
.e-input-group.e-custom-multi-column {
color: #ab3243;
background: #32a5ab;
}
</style><template>
<div id="app">
<div id='container' style="margin:50px auto 0; width:500px;">
<br>
<ejs-multicolumncombobox id='multicolumn' :dataSource='empData' :fields='fields' text='Michael' cssClass='e-custom-multi-column'>
<e-columns>
<e-column field='EmpID' header='Employee ID' width='90'></e-column>
<e-column field='Name' header='Name' width='90'></e-column>
<e-column field='Designation' header='Designation' width='90'></e-column>
<e-column field='Country' header='Country' width='70'></e-column>
</e-columns>
</ejs-multicolumncombobox>
</div>
</div>
</template>
<script>
import { MultiColumnComboBoxComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-vue-multicolumn-combobox";
export default {
components: {
'ejs-multicolumncombobox': MultiColumnComboBoxComponent,
'e-columns': ColumnsDirective,
'e-column': ColumnDirective,
},
data () {
return {
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" }
],
fields: { text: 'Name', value: 'EmpID' }
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-multicolumn-combobox/styles/material.css";
.e-input-group.e-custom-multi-column {
color: #ab3243;
background: #32a5ab;
}
</style>Disabled
The disabled property is used to disable the multicolumn combobox. By default, its value is false.
<template>
<div id="app">
<div id='container' style="margin:50px auto 0; width:500px;">
<br>
<ejs-multicolumncombobox id='multicolumn' :dataSource='empData' :fields='fields' text='Michael' disabled='true'>
<e-columns>
<e-column field='EmpID' header='Employee ID' width='90'></e-column>
<e-column field='Name' header='Name' width='90'></e-column>
<e-column field='Designation' header='Designation' width='90'></e-column>
<e-column field='Country' header='Country' width='70'></e-column>
</e-columns>
</ejs-multicolumncombobox>
</div>
</div>
</template>
<script setup>
import { MultiColumnComboBoxComponent as EjsMulticolumncombobox } from "@syncfusion/ej2-vue-multicolumn-combobox";
import { ColumnsDirective as EColumns, ColumnDirective as EColumn } from "@syncfusion/ej2-vue-multicolumn-combobox";
const 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" }
];
const fields = { text: 'Name', value: 'EmpID' };
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-multicolumn-combobox/styles/material.css";
</style><template>
<div id="app">
<div id='container' style="margin:50px auto 0; width:500px;">
<br>
<ejs-multicolumncombobox id='multicolumn' :dataSource='empData' :fields='fields' text='Michael' disabled='true'>
<e-columns>
<e-column field='EmpID' header='Employee ID' width='90'></e-column>
<e-column field='Name' header='Name' width='90'></e-column>
<e-column field='Designation' header='Designation' width='90'></e-column>
<e-column field='Country' header='Country' width='70'></e-column>
</e-columns>
</ejs-multicolumncombobox>
</div>
</div>
</template>
<script>
import { MultiColumnComboBoxComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-vue-multicolumn-combobox";
export default {
components: {
'ejs-multicolumncombobox': MultiColumnComboBoxComponent,
'e-columns': ColumnsDirective,
'e-column': ColumnDirective,
},
data () {
return {
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" }
],
fields: { text: 'Name', value: 'EmpID' }
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-multicolumn-combobox/styles/material.css";
</style>Setting read only
You can use readonly property to disable the user interactions in the multicolumn combobox component.
<template>
<div id="app">
<div id='container' style="margin:50px auto 0; width:500px;">
<br>
<ejs-multicolumncombobox id='multicolumn' :dataSource='empData' :fields='fields' text='Michael' readonly='true'>
<e-columns>
<e-column field='EmpID' header='Employee ID' width='90'></e-column>
<e-column field='Name' header='Name' width='90'></e-column>
<e-column field='Designation' header='Designation' width='90'></e-column>
<e-column field='Country' header='Country' width='70'></e-column>
</e-columns>
</ejs-multicolumncombobox>
</div>
</div>
</template>
<script setup>
import { MultiColumnComboBoxComponent as EjsMulticolumncombobox } from "@syncfusion/ej2-vue-multicolumn-combobox";
import { ColumnsDirective as EColumns, ColumnDirective as EColumn } from "@syncfusion/ej2-vue-multicolumn-combobox";
const 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" }
];
const fields = { text: 'Name', value: 'EmpID' };
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-multicolumn-combobox/styles/material.css";
</style><template>
<div id="app">
<div id='container' style="margin:50px auto 0; width:500px;">
<br>
<ejs-multicolumncombobox id='multicolumn' :dataSource='empData' :fields='fields' text='Michael' readonly='true'>
<e-columns>
<e-column field='EmpID' header='Employee ID' width='90'></e-column>
<e-column field='Name' header='Name' width='90'></e-column>
<e-column field='Designation' header='Designation' width='90'></e-column>
<e-column field='Country' header='Country' width='70'></e-column>
</e-columns>
</ejs-multicolumncombobox>
</div>
</div>
</template>
<script>
import { MultiColumnComboBoxComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-vue-multicolumn-combobox";
export default {
components: {
'ejs-multicolumncombobox': MultiColumnComboBoxComponent,
'e-columns': ColumnsDirective,
'e-column': ColumnDirective,
},
data () {
return {
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" }
],
fields: { text: 'Name', value: 'EmpID' }
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-multicolumn-combobox/styles/material.css";
</style>Configure grid settings
You can use the gridSettings property to configure the columns in the popup content. You can customize the gridSettings by using gridSettingsModel, which provides options such as gridLines, rowHeight and enableAltRow.
Setting grid lines
You can use gridLines property to set the mode of the gridlines. You can set Horizontal, Vertical, Default, None and Both.
- Both: Displays both horizontal and vertical grid lines.
- None: No grid lines are displayed.
- Horizontal: Displays the horizontal grid lines only.
- Vertical: Displays the vertical grid lines only.
- Default: Displays grid lines based on the theme.
In the following examples, gridLines is set with Horizontal.
<template>
<div id="app">
<div id='container' style="margin:50px auto 0; width:500px;">
<br>
<ejs-multicolumncombobox id='multicolumn' :dataSource='empData' :fields='fields' text='Michael' :gridSettings='gridSettings'>
<e-columns>
<e-column field='EmpID' header='Employee ID' width='90'></e-column>
<e-column field='Name' header='Name' width='90'></e-column>
<e-column field='Designation' header='Designation' width='90'></e-column>
<e-column field='Country' header='Country' width='70'></e-column>
</e-columns>
</ejs-multicolumncombobox>
</div>
</div>
</template>
<script setup>
import { MultiColumnComboBoxComponent as EjsMulticolumncombobox } from "@syncfusion/ej2-vue-multicolumn-combobox";
import { ColumnsDirective as EColumns, ColumnDirective as EColumn } from "@syncfusion/ej2-vue-multicolumn-combobox";
const 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" }
];
const fields = { text: 'Name', value: 'EmpID' };
const gridSettings = { gridLines: 'Horizontal' };
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-multicolumn-combobox/styles/material.css";
</style><template>
<div id="app">
<div id='container' style="margin:50px auto 0; width:500px;">
<br>
<ejs-multicolumncombobox id='multicolumn' :dataSource='empData' :fields='fields' text='Michael' :gridSettings='gridSettings'>
<e-columns>
<e-column field='EmpID' header='Employee ID' width='90'></e-column>
<e-column field='Name' header='Name' width='90'></e-column>
<e-column field='Designation' header='Designation' width='90'></e-column>
<e-column field='Country' header='Country' width='70'></e-column>
</e-columns>
</ejs-multicolumncombobox>
</div>
</div>
</template>
<script>
import { MultiColumnComboBoxComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-vue-multicolumn-combobox";
export default {
components: {
'ejs-multicolumncombobox': MultiColumnComboBoxComponent,
'e-columns': ColumnsDirective,
'e-column': ColumnDirective,
},
data () {
return {
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" }
],
fields: { text: 'Name', value: 'EmpID' },
gridSettings: { gridLines: 'Horizontal' }
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-multicolumn-combobox/styles/material.css";
</style>Setting row height
You can use rowHeight property to set the height of the rows in the popup content.
<template>
<div id="app">
<div id='container' style="margin:50px auto 0; width:500px;">
<br>
<ejs-multicolumncombobox id='multicolumn' :dataSource='empData' :fields='fields' text='Michael' :gridSettings='gridSettings'>
<e-columns>
<e-column field='EmpID' header='Employee ID' width='90'></e-column>
<e-column field='Name' header='Name' width='90'></e-column>
<e-column field='Designation' header='Designation' width='90'></e-column>
<e-column field='Country' header='Country' width='70'></e-column>
</e-columns>
</ejs-multicolumncombobox>
</div>
</div>
</template>
<script setup>
import { MultiColumnComboBoxComponent as EjsMulticolumncombobox } from "@syncfusion/ej2-vue-multicolumn-combobox";
import { ColumnsDirective as EColumns, ColumnDirective as EColumn } from "@syncfusion/ej2-vue-multicolumn-combobox";
const 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" }
];
const fields = { text: 'Name', value: 'EmpID' };
const gridSettings = { rowHeight: 40 };
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-multicolumn-combobox/styles/material.css";
</style><template>
<div id="app">
<div id='container' style="margin:50px auto 0; width:500px;">
<br>
<ejs-multicolumncombobox id='multicolumn' :dataSource='empData' :fields='fields' text='Michael' :gridSettings='gridSettings'>
<e-columns>
<e-column field='EmpID' header='Employee ID' width='90'></e-column>
<e-column field='Name' header='Name' width='90'></e-column>
<e-column field='Designation' header='Designation' width='90'></e-column>
<e-column field='Country' header='Country' width='70'></e-column>
</e-columns>
</ejs-multicolumncombobox>
</div>
</div>
</template>
<script>
import { MultiColumnComboBoxComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-vue-multicolumn-combobox";
export default {
components: {
'ejs-multicolumncombobox': MultiColumnComboBoxComponent,
'e-columns': ColumnsDirective,
'e-column': ColumnDirective,
},
data () {
return {
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" }
],
fields: { text: 'Name', value: 'EmpID' },
gridSettings: { rowHeight: 40 }
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-multicolumn-combobox/styles/material.css";
</style>Setting alternate rows
You can use the enableAltRow property to enable the alternate row styles in the multicolumn combobox. If enabled, it will add the e-altrow CSS class to the list of items in the popup.
<template>
<div id="app">
<div id='container' style="margin:50px auto 0; width:500px;">
<br>
<ejs-multicolumncombobox id='multicolumn' :dataSource='empData' :fields='fields' text='Michael' :gridSettings='gridSettings'>
<e-columns>
<e-column field='EmpID' header='Employee ID' width='90'></e-column>
<e-column field='Name' header='Name' width='90'></e-column>
<e-column field='Designation' header='Designation' width='90'></e-column>
<e-column field='Country' header='Country' width='70'></e-column>
</e-columns>
</ejs-multicolumncombobox>
</div>
</div>
</template>
<script setup>
import { MultiColumnComboBoxComponent as EjsMulticolumncombobox } from "@syncfusion/ej2-vue-multicolumn-combobox";
import { ColumnsDirective as EColumns, ColumnDirective as EColumn } from "@syncfusion/ej2-vue-multicolumn-combobox";
const 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" }
];
const fields = { text: 'Name', value: 'EmpID' };
const gridSettings = { enableAltRow: true };
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-multicolumn-combobox/styles/material.css";
</style><template>
<div id="app">
<div id='container' style="margin:50px auto 0; width:500px;">
<br>
<ejs-multicolumncombobox id='multicolumn' :dataSource='empData' :fields='fields' text='Michael' :gridSettings='gridSettings'>
<e-columns>
<e-column field='EmpID' header='Employee ID' width='90'></e-column>
<e-column field='Name' header='Name' width='90'></e-column>
<e-column field='Designation' header='Designation' width='90'></e-column>
<e-column field='Country' header='Country' width='70'></e-column>
</e-columns>
</ejs-multicolumncombobox>
</div>
</div>
</template>
<script>
import { MultiColumnComboBoxComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-vue-multicolumn-combobox";
export default {
components: {
'ejs-multicolumncombobox': MultiColumnComboBoxComponent,
'e-columns': ColumnsDirective,
'e-column': ColumnDirective,
},
data () {
return {
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" }
],
fields: { text: 'Name', value: 'EmpID' },
gridSettings: { enableAltRow: true }
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-multicolumn-combobox/styles/material.css";
</style>