Getting Started with the Vue MultiColumn ComboBox Component in Vue 2
13 Jun 202424 minutes to read
This article provides a step-by-step guide for setting up a Vue 2 project using Vue-CLI and integrating the Syncfusion Vue MultiColumn ComboBox component using the Composition API / Options API.
Prerequisites
System requirements for Syncfusion Vue UI components
Setting up the Vue 2 project
To generate a Vue 2 project using Vue-CLI, use the vue create command. Follow these steps to install Vue CLI and create a new project:
npm install -g @vue/cli
vue create quickstart
cd quickstart
npm run serveor
yarn global add @vue/cli
vue create quickstart
cd quickstart
yarn run serveWhen creating a new project, choose the option Default ([Vue 2] babel, eslint) from the menu.
Once the quickstart project is set up with default settings, proceed to add Syncfusion components to the project
Add Syncfusion Vue packages
Syncfusion packages are available at npmjs.com. To use Vue components, install the required npm package.
This article uses the Vue MultiColumn ComboBox component as an example. Install the @syncfusion/ej2-vue-multicolumn-combobox package by running the following command:
npm install @syncfusion/ej2-vue-multicolumn-combobox --saveor
yarn add @syncfusion/ej2-vue-multicolumn-comboboxImport Syncfusion CSS styles
You can import themes for the Syncfusion Vue component in various ways, such as using CSS or SASS styles from npm packages, CDN, CRG and Theme Studio. Refer to themes topic to know more about built-in themes and different ways to refer to themes in a Vue project.
In this article, the Material theme is applied using CSS styles, which are available in installed packages. The necessary Material CSS styles for the MultiColumn ComboBox component and its dependents were imported into the <style> section of src/App.vue file.
<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>Add Syncfusion Vue component
Follow the below steps to add the Vue MultiColumn ComboBox component using Composition API or Options API:
1. First, import and register the MultiColumn ComboBox component in the script section of the src/App.vue file. If you are using the Composition API, you should add the setup attribute to the script tag to indicate that Vue will be using the Composition API.
<script setup>
import { MultiColumnComboBoxComponent as EjsMulticolumnCombobox } from "@syncfusion/ej2-vue-multicolumn-combobox";
</script><script>
import { MultiColumnComboBoxComponent } from "@syncfusion/ej2-vue-multicolumn-combobox";
export default {
components: {
'ejs-multicolumncombobox': MultiColumnComboBoxComponent
}
}
</script>2. In the template section, define the MultiColumn ComboBox component with the dataSource and placeholder property.
<template>
<div id="app">
<div id='container' style="margin:50px auto 0; width:250px;">
<br>
<ejs-multicolumncombobox id='multicolumn' :dataSource='empData' placeholder='Select a employee'></ejs-multicolumncombobox>
</div>
</div>
</template>Binding data source with fields and columns
After initializing, populate the MultiColumn ComboBox with data by using the dataSource property, to map the data for each specified columns use the <e-column> selector and the fields property to map the data fields from the dataSource.
<template>
<div id="app">
<div id='container' style="margin:50px auto 0; width:250px;">
<br>
<ejs-multicolumncombobox id='multicolumn' :dataSource='employeeData' :fields='fields' placeholder='Select a employee'>
<e-columns>
<e-column field='EmpID' header='Employee ID' width='70'></e-column>
<e-column field='Name' header='Name' width='80'></e-column>
<e-column field='Designation' header='Designation' width='60'></e-column>
<e-column field='Country' header='Country' width='80'></e-column>
</e-columns>
</ejs-multicolumncombobox>
</div>
</div>
</template>
<script setup>
import { MultiColumnComboBoxComponent as EjsMulticolumnCombobox } from "@syncfusion/ej2-vue-multicolumn-combobox";
import { ColumnsDirective as EColumnsDirective, ColumnDirective as EColumnDirective } from "@syncfusion/ej2-vue-multicolumn-combobox";
const employeeData = [
{ "EmpID": 1001, "Name": "Andrew Fuller", "Designation": "Team Lead", "Country": "England" },
{ "EmpID": 1002, "Name": "Robert", "Designation": "Developer", "Country": "USA" },
{ "EmpID": 1003, "Name": "John", "Designation": "Tester", "Country": "Germany" },
{ "EmpID": 1004, "Name": "Robert King", "Designation": "Product Manager", "Country": "India" },
{ "EmpID": 1005, "Name": "Steven Buchanan", "Designation": "Developer", "Country": "Italy" },
{ "EmpID": 1006, "Name": "Jane Smith", "Designation": "Developer", "Country": "Europe" },
{ "EmpID": 1007, "Name": "James Brown", "Designation": "Developer", "Country": "Australia" },
{ "EmpID": 1008, "Name": "Laura Callahan", "Designation": "Developer", "Country": "Africa" },
{ "EmpID": 1009, "Name": "Mario Pontes", "Designation": "Developer", "Country": "Russia" }
];
const fields = { text: 'Name', value: 'EmpID' };
</script><template>
<div id="app">
<div id='container' style="margin:50px auto 0; width:250px;">
<br>
<ejs-multicolumncombobox id='multicolumn' :dataSource='employeeData' :fields='fields' placeholder='Select a employee'>
<e-columns>
<e-column field='EmpID' header='Employee ID' width='70'></e-column>
<e-column field='Name' header='Name' width='80'></e-column>
<e-column field='Designation' header='Designation' width='60'></e-column>
<e-column field='Country' header='Country' width='80'></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 {
employeeData: [
{ "EmpID": 1001, "Name": "Andrew Fuller", "Designation": "Team Lead", "Country": "England" },
{ "EmpID": 1002, "Name": "Robert", "Designation": "Developer", "Country": "USA" },
{ "EmpID": 1003, "Name": "John", "Designation": "Tester", "Country": "Germany" },
{ "EmpID": 1004, "Name": "Robert King", "Designation": "Product Manager", "Country": "India" },
{ "EmpID": 1005, "Name": "Steven Buchanan", "Designation": "Developer", "Country": "Italy" },
{ "EmpID": 1006, "Name": "Jane Smith", "Designation": "Developer", "Country": "Europe" },
{ "EmpID": 1007, "Name": "James Brown", "Designation": "Developer", "Country": "Australia" },
{ "EmpID": 1008, "Name": "Laura Callahan", "Designation": "Developer", "Country": "Africa" },
{ "EmpID": 1009, "Name": "Mario Pontes", "Designation": "Developer", "Country": "Russia" }
],
fields: { text: 'Name', value: 'EmpID' };
}
}
}
</script>Here is the summarized code for the above steps in the src/App.vue file:
<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 employee'>
<e-columns>
<e-column field='EmpID' header='Employee ID' width='70'></e-column>
<e-column field='Name' header='Name' width='60'></e-column>
<e-column field='Designation' header='Designation' width='70'></e-column>
<e-column field='Country' header='Country' width='60'></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 employee'>
<e-columns>
<e-column field='EmpID' header='Employee ID' width='70'></e-column>
<e-column field='Name' header='Name' width='60'></e-column>
<e-column field='Designation' header='Designation' width='70'></e-column>
<e-column field='Country' header='Country' width='60'></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>Run the application
To run the application, use the following command:
npm run serveor
yarn run serveConfigure the popup list
By default, the width of the popup list automatically adjusts according to the MultiColumn ComboBox input element’s width, and the height of the popup list has ‘300px’.
The height and width of the popup list can also be customized using the popupHeight and popupWidth properties respectively.
In the following sample, popup list’s width and height are configured.
<template>
<div id="app">
<div id='container' style="margin:50px auto 0; width:380px;">
<br>
<ejs-multicolumncombobox id='multicolumn' :dataSource='empData' :fields='fields' popupWidth='500px' popupHeight='250px' placeholder='Select an employee'>
<e-columns>
<e-column field='EmpID' header='Employee ID' width='70'></e-column>
<e-column field='Name' header='Name' width='60'></e-column>
<e-column field='Designation' header='Designation' width='70'></e-column>
<e-column field='Country' header='Country' width='60'></e-column>
</e-columns>
</ejs-multicolumncombobox>
</div>
</div>
</template>
<script setup>
import { MultiColumnComboBoxComponent as EjsMulticolumnombobox } 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:380px;">
<br>
<ejs-multicolumncombobox id='multicolumn' :dataSource='empData' :fields='fields' popupWidth='500px' popupHeight='250px' placeholder='Select an employee'>
<e-columns>
<e-column field='EmpID' header='Employee ID' width='70'></e-column>
<e-column field='Name' header='Name' width='60'></e-column>
<e-column field='Designation' header='Designation' width='70'></e-column>
<e-column field='Country' header='Country' width='60'></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>