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:

[LeoLavanya Dhanaraj]

Rahul, based on your shared screenshot, we understand that you want to display all the selected values in the Dropdown Tree input box as Chips. You can meet this need by enabling the wrapText property and set value as true.

Check out the below sample link, code snippet and output screenshots for further assistance.

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

<ejs-dropdowntree

  #defaultCheck

  id="checkbox"

  [showSelectAll]="true"

  [showClearButton]="true"

  [allowFiltering]="true"

  [fields]="field"

  [wrapText]="true"

  [showCheckBox]="showCheckBox"

  [mode]="mode"

  [selectAllText]="'Select All'"

  popupHeight="220px"

  placeholder="Select items"

></ejs-dropdowntree>

Output screenshot:

[Rahul Ravi]

Hi Lavanya,

Thanks for your assistance. But there is one more issue that I wanted to be addressed.

Selecting the results filtered based on the search key enables Select All checkbox despite of selecting only few and not all options from the dropdown.

For instance, type new in the searchable area of the dropdown in the below stackbiltz and check the checkbox of New South Wales. Then, clear the search result and observe the select all checkbox, it'll be checked despite of selecting one option from the list

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

Thanks in advance.

Kindly find the screenshot below for your reference:

Screenshot:

[LeoLavanya Dhanaraj]

Hi Rahul,

Based on the shared details, we have validated the mentioned issue with the Angular Dropdown Tree component(Issue with the showSelectAll property after performing the filtering action in DDT), and we have considered it as a bug on our end. The fix for this issue will be included in our weekly patch release, which is expected to be released in the first week of July 2024.

You can track the status of the fix through the following link.

Feedback : https://www.syncfusion.com/feedback/58880/facing-an-issue-with-the-selectall-property-after-performing-the-filtering-action

Disclaimer: Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.

We appreciate your patience.

Regards,

Leo Lavanya Dhanaraj

[LeoLavanya Dhanaraj]

Hi Rahul,

Thanks for your patience.

We are glad to announce that our patch release (V26.1.40) has been rolled out successfully. The issue with the showSelectAll property, which occurred after performing the filtering action in the Dropdown Tree component, has been resolved in this release.

To access this fix, we suggest you update the package to 26.1.40 and we include the sample in the latest version for your reference.

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

Feedback : https://www.syncfusion.com/feedback/58880/facing-an-issue-with-the-selectall-property-after-performing-the-filtering-action

Release Notes : https://ej2.syncfusion.com/angular/documentation/release-notes/26.1.40?type=all#bug-fixes-5

Regards,

Leo Lavanya Dhanaraj