How to make selected items as chips when mode=checkbox

Thread ID:	Created:	Updated:	Platform:	Replies:
150455	Jan 7,2020 09:27 PM UTC	Jan 11,2020 11:02 AM UTC	Vue	1

Subscribe to this post

Tags: MultiselectDropDown

Luke Peng

Asked On January 7, 2020 09:27 PM UTC

Hi,

I am using multiselect dropdown with mode='CheckBox', but at the mean time I also want the selected items in text field to be chips instead of comma seperated text.

Is there way to do that? Thank you

<ejs-multiselect
        id='multiselect'
        :dataSource='allOptions'
        mode="CheckBox"
        :fields='fields'
        v-model="currentVal"
        @focus="hasFocus = true"
        @blur="hasFocus = false"
        :showDropDownIcon="true"
        :enabled="!disabled"
        :placeholder="placeholder && !showLabel ? placeholder : null"
        :zIndex="99999999"
      >
      </ejs-multiselect>

Reply | Reply with quote

Sevvandhi Nagulan [Syncfusion]

Replied On January 11, 2020 11:02 AM UTC

Hi Luke,

Greetings from Sycnfusion support.

We have checked the reported requirement. We prepared the sample with CheckBox mode and when you select the value, selected value will be displayed as chips. Kindly refer the below code example,

[App.vue]

onChange: function(args) {

var multiSelectObj = this.$refs.multiSelectObj.ej2Instances;

if (multiSelectObj.viewWrapper) {

multiSelectObj.viewWrapper.style.display = 'none';

}

multiSelectObj.chipCollectionWrapper.style.display = 'block';

let inputPos = multiSelectObj.overAllWrapper.getBoundingClientRect()

let popupPos = multiSelectObj.popupWrapper && multiSelectObj.popupWrapper.getBoundingClientRect();

if (inputPos && popupPos && (inputPos.top + inputPos.height > popupPos.top)) {

multiSelectObj.popupWrapper.style.top = (inputPos.top + inputPos.height) + 'px';

}

onSelect: function(args) {

var multiSelectObj = this.$refs.multiSelectObj.ej2Instances;

multiSelectObj.addChip(args.itemData.Game, args.itemData.Id, args.e);

setTimeout(this.onChange, 5)

onCreated: function() {

var multiSelectObj = this.$refs.multiSelectObj.ej2Instances;

multiSelectObj.chipCollectionWrapper = multiSelectObj.createElement('span', {

className: 'e-chips-collection',

styles: 'display:none'

});

multiSelectObj.componentWrapper.appendChild(multiSelectObj.chipCollectionWrapper);

//multiSelectObj.value = ['Game1','Game2']; // You can set the preselect the value

onFocus: function(args) {

document.getElementsByClassName('e-delim-view')[0].style.display = 'none';

onSelectAll: function(args) {

var multiSelectObj = this.$refs.multiSelectObj.ej2Instances;

multiSelectObj.hidePopup();

onRemove: function(args) {

setTimeout(this.onChange, 5);

Please find the sample below,

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/quickstart-1807769715

Regards,

Sevvandhi N

Reply | Reply with quote

How to make selected items as chips when mode=checkbox

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US