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

Always show data in dropdown list

Hi,


I have a dropdown list with multiple elements.

But I have this behaviour when after I select my elements.

I understand it is a normal comportement with class " e-delim-view e-delim-values e-delim-total", but in my case, I don't want display the number of selected elements, but always the list.


Thanks.


1 Reply

UD UdhayaKumar Duraisamy Syncfusion Team December 22, 2022 01:06 PM UTC

As you mentioned, by default the component will display the number of selected values if there is not enough space to display all of the selected items.


To address your specific requirement of displaying the selected items' values instead of the "2 selected" text, you have the option to either increase the width of the component or use the change event.


 <ejs-multiselect

    id="sample-list1"

    [dataSource]="sportsData"

    [fields]="fields"

    [placeholder]="waterMark"

    width="200px"

    (change)="onChange($event)"

  ></ejs-multiselect>

onChange(e) {

    document.getElementsByClassName(

      'e-delim-view e-delim-values'

    )[0].innerHTML = e.value.join(',');

  }


Sample : https://stackblitz.com/edit/angular-ivy-2sm99e?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts


[ Reference ]




Loader.
Up arrow icon