How to show the selected item as chips in Vue MultiSelect component with CheckBox mode
This article provides a guide on how to display selected items as chips in a Vue MultiSelect component when operating in CheckBox mode. The example includes a sample code snippet and references to the Syncfusion documentation for further details.
In the code snippet below, we create a span with the “e-chips-collection” class name and append it to the component wrapper, initially setting its display to none in the created event. When the component is focused, we hide the view wrapper to prevent displaying the default delimiter view values. Upon selecting a value, we use the addChip method in the select event to create a selected option as a chip and set the chip collection wrapper’s display to block, allowing it to be shown in the input. The popup position is updated when selecting or removing chips in the onchange method.
<template>
<div>
<div id="multiselect-sample">
<div class="col-lg-8 control-section">
<div class="control-styles">
<h4>CheckBox</h4>
<ejs-multiselect
id="multiselect-checkbox"
ref="multiselectObj"
cssClass="e-specific"
:dataSource="countries"
:placeholder="checkWaterMark"
:fields="checkFields"
:mode="multiMode"
:popupHeight="popHeight"
:showDropDownIcon="showDropDownIcon"
:showSelectAll="showSelectAll"
:removed="removedHandler"
:selectedAll="selectedAllHandler"
:created="createdHandler"
:focus="focusHandler"
:select="selectHandler"
:enableSelectionOrder="enableSelectionOrder"
:filterBarPlaceholder="filterPlaceholder"
></ejs-multiselect>
</div>
</div>
</div>
</div>
</template>
<script>
import {
MultiSelectComponent,
CheckBoxSelection,
} from '@syncfusion/ej2-vue-dropdowns';
import { CheckBoxComponent } from '@syncfusion/ej2-vue-buttons';
import data from './dataSource.json';
export default {
components: {
'ejs-multiselect': MultiSelectComponent,
'ejs-checkbox': CheckBoxComponent,
},
data: function () {
return {
checkFields: { text: 'Name', value: 'Code' },
checkWaterMark: 'Select countries',
popHeight: '350px',
multiMode: 'CheckBox',
filterPlaceholder: 'Search countries',
showSelectAll: true,
showDropDownIcon: true,
enableSelectionOrder: true,
countries: data['countries'],
};
},
methods: {
createdHandler: function () {
const multiselectObj = this.$refs.multiselectObj.ej2Instances;
multiselectObj.chipCollectionWrapper = multiselectObj.createElement(
'span',
{
className: 'e-chips-collection',
styles: 'display:none',
}
);
multiselectObj.componentWrapper.appendChild(
multiselectObj.chipCollectionWrapper
);
},
focusHandler: function () {
const multiselectObj = this.$refs.multiselectObj.ej2Instances;
multiselectObj.viewWrapper.style.display = 'none';
},
selectHandler: function (args) {
const multiselectObj = this.$refs.multiselectObj.ej2Instances;
multiselectObj.addChip(args.itemData.Name, args.itemData.Code, args.e);
setTimeout(() => {
this.onChange(args);
}, 50);
},
removedHandler: function (args) {
var proxy = this;
setTimeout(function () {
proxy.onChange(args);
}, 10);
},
onChange: function (args) {
const multiselectObj = this.$refs.multiselectObj.ej2Instances;
if (multiselectObj.viewWrapper) {
multiselectObj.viewWrapper.style.display = 'none';
}
multiselectObj.chipCollectionWrapper.style.display = 'block';
const inputPos = multiselectObj.overAllWrapper.getBoundingClientRect();
const popupPos =
multiselectObj.popupWrapper &&
multiselectObj.popupWrapper.getBoundingClientRect();
if (
inputPos &&
popupPos &&
inputPos.top + inputPos.height > popupPos.top
|| (args.e.target.parentElement.parentElement.textContent == 'Select All' || args.e.target.parentElement.textContent == 'Select All' || args.e.target.textContent == 'Select All')
) {
multiselectObj.popupWrapper.style.top =
inputPos.top + inputPos.height + 'px';
}
this.selectedItems = document.getElementById(
'multiselect-checkbox'
).ej2_instances[0].text;
}
},
provide: {
multiselect: [CheckBoxSelection],
},
};
</script>
Sample
To see the MultiSelect component in action with CheckBox mode, refer to the following live sample:
Additional References
For more details on the API and event handling, refer to the official Syncfusion documentation:
