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

[Rahul Ravi]

Hey, I have a quick question on this. I'm about to implement dropdown tree with checkbox and chips in angular. 

The concern for me here is when the dropdown tree loses focus, the values selected are not displayed as chips rather it is displayed as a comma separated values.

I went through your documentation and several forum discussions, none could help me in achieving this.

The objective is to display the values as chips even after focusing out. Does ejs-dropdown provides feasibility to get to this?

Any help would be highly appreciated. Thanks in advance.

Kindly find the screenshot and stackbiltz link below:

stackbiltz link:  https://stackblitz.com/edit/angular-gzmh4z-xcxmf2

screenshot:

[LeoLavanya Dhanaraj]

Hi Rahul,

Greetings from Syncfusion support.

Based on the details shared, we understand that you want to display the selected values in the Dropdown Tree input as a Chip structure. You can meet this requirement by enabling the mode attribute and setting the value to Box, which will help visualize the selected items as chips. Please refer to the sample and code snippets below for further assistance.

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

[app.component.html]

<ejs-dropdowntree

  #defaultCheck

  id="checkbox"

  [fields]="field"

  [showCheckBox]="showCheckBox"

  [mode]="mode"

  …

></ejs-dropdowntree>

 

[app.component.ts]

public mode = 'Box';

Refer the above shared details and get back to us if you need any further assistance.

Regards,

Leo Lavanya Dhanaraj 

[Rahul Ravi]

Hi Lavanya,

This doesn't work for multiple values i.e., when more than one is selected in dropdown and focusing out, I still want the selected values to be displayed in chips.

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

Let me know for further inputs from my side

Kindly find the screenshot below for your reference:

Expected:

Actual: