We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Is there a way to have checkbox list in chip customization

Hi,

I am adding edited images for you to have a better understanding of my requirement.

multiselect1.png

When in focus, I need a checkbox list to select and the selected labels should look the same way displayed in the first image. 

Also, I require "Select All" and Filter Input in the dropdown


multiselect2.png

When not in focus, the selected labels should be the same as in the second image. 

Also if the selected labels are more than the width of the multi-select then the string "+n more.." should show.

Is it possible to do this way?  Please help.

Thank you.


1 Reply

SP Sureshkumar P Syncfusion Team November 7, 2022 05:58 AM

Hi Nikitha,

You can achieve your requirement by customizing the component behavior on the change event.

Find the code example here:

onChange(args) {

    if ((this.mulObj as any).viewWrapper) {

      (this.mulObj as any).viewWrapper.style.display = 'none';

    }

    (this.mulObj as any).chipCollectionWrapper.style.display = 'block';

    let inputPos = (this.mulObj as any).overAllWrapper.getBoundingClientRect();

    let popupPos =

      (this.mulObj as any).popupWrapper &&

      (this.mulObj as any).popupWrapper.getBoundingClientRect();

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

      (this.mulObj as any).popupWrapper.style.top =

        inputPos.top + inputPos.height + 'px';

    }

    this.selectedItems = document.getElementById(

      'multiselect-checkbox'

    ).ej2_instances[0].text;

  }

 


Find the customized sample here: https://stackblitz.com/edit/angular-9endz3-zzb1qh?file=app.component.html,app.component.ts

Regards,

Sureshkumar P


Loader.
Live Chat Icon For mobile
Up arrow icon