How to make selected items as chips when mode=checkbox

[Luke Peng]

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>

[Sevvandhi Nagulan]

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 

[Khushbu]

How to make selected items as chips when mode=checkbox in react js

   

[Sevvandhi Nagulan]

Hi Khushbu, 

Greetings from Syncfusion support. 

Please find the sample in react platform for the mentioned requirement. 

https://stackblitz.com/edit/react-hba9qc-z2afhp?file=index.js 

Regards, 

Sevvandhi N 

[Louis Ormerod]

It's more straightforward to shift over to using the Dropdown Tree component, which supports checkboxes with chips out of the box.

https://stackblitz.com/edit/angular-gzmh4z?file=app.component.ts

[Berly Christopher]

Hi Louis Ormerod,

Please let us know if you need further assistance on this.

Regards,

Berly B.C