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

MultiSelect - on loading the control it shows "2 items selected" instead of the values selected

I am using the component ejs-multiselect. I have a simple form and when I open it for edit I have items preselected in the control. The problem is when i open the form and i have 2 preselected items, for example, the text of the multiselect is "2 items selected" instead of "John Smith, Bella Simpson". Can you please tell me how to configure the control so that when I open the form i see the names and not how much items i have selected.
This is my code:
 <ejs-multiselect id="AssignedUsersIds" floatLabelType="Auto" popupHeight="350px" value="@Model.Result.AssignedUsersIds" placeholder="@Localizer.GetLocalizedHtmlString("AssignedTo")" >
                                <e-data-manager adaptor="UrlAdaptor" url="@Url.Action("UrlDatasourceUserPerson", "Collections")"></e-data-manager>
                                <e-multiselect-fields text="PersonFullName" value="userId"></e-multiselect-fields>

I also attach 2 files: MultiSelect_HowItAppears.PNG and MultiSelect_HowItShouldAppear.PNG to illustrate the situation.
Thank you in advance for the help!!

9 Replies

SN Sevvandhi Nagulan Syncfusion Team November 26, 2019 10:48 AM UTC

Hi Elena 
Greetings from Syncfusion support. 
We cannot able to see the attached screenshot. But we suspect that you were placed the component inside tab or boostrap modal. The cause of the issue is, when the parent component’s is in display none, then parent component overrides the child component width. So MultiSelect component width is not properly calculated. To get rid of the reported issue, we suggest to call the refresh method as mentioned below, 
If you have  placed the component inside bootstrap modal, then call the refresh method in the modal open event, 
             $(function () { 
        $('#myModal').on('shown.bs.modal', function () { 
If have placed the component inside Syncfusion tab, then  call the refresh method in the tab selected event, 
   function selected() { 
Please find the sample below, 
Sevvandhi N 

EP Elena Popova November 26, 2019 12:22 PM UTC

The control was in a modal indeed. Your code worked for me. Thank you very much :)

SN Sevvandhi Nagulan Syncfusion Team November 26, 2019 12:35 PM UTC

Hi Elena, 
Most welcome. Please let us know if you need any further assistance.  
Sevvandhi N 

RE Renil November 19, 2021 12:29 PM UTC

Hi, I face the same issue with angular  ejs-multiselect . How can i do it in angular

BC Berly Christopher Syncfusion Team November 22, 2021 06:58 AM UTC

Hi Renil, 
Greetings from Syncfusion support. 
We would like to inform you that the reported issue is caused due to below mentioned reasons when you are placing inside the Dialog component. 
1.In Check Box mode, selected value is updated in the Multiselect view wrapper based on the width calculation.  
2. When dialog is closed, dialog is made display: none and so components inside dialog (Multiselect) are in hidden state. 
3. When parent element is in display:none, then the offsetwidth of their child is always zero. 
4. Since, in Multiselect, we set the width for the view wrapper based on the component wrapper offsetwidth and because of offsetwidth is zero, view wrapper width is updated as zero. 
So, we suggest you to call the refresh() method in the Dialog’s open event to get rid of the reported issue. 
 // On Dialog open, 'Open' Button will be hidden 
 public dialogOpen = (): void => { 
  document.getElementById('dlgbtn').style.display = 'none'; 
Please find the sample from the below link. 
Still issue persists, please share the issue reproducing sample that will help us to check and proceed further at our end. 
Berly B.C 

EC Ed Courtney March 29, 2022 03:33 PM UTC

I'm having a similar issue in Angular. I'm creating a page to print, so I use window.open with a new URL and import the components I need. However, the pre-selected multiselect shows up as "2 available." I'm not sure why this is happening since it's not in a dialog. Any suggestions?

PM Ponmani Murugaiyan Syncfusion Team March 31, 2022 01:10 AM UTC

Hi Ed,

By default, if the component width is small the selected value will be shown as “n selected”. This is the intended behaviour of the component. We suggest you to set the width property to increase the component width and ensure whether the selected items text visible in the input.

If issue still exists in your end, please share the issue reproducing sample/code snippet to ensure further.


Ponmani M

PK praveen kumar February 23, 2023 07:40 AM UTC


I'm using syncfusion control in javascript.

ej2_instances[0].refresh() creates new element within the input.

and there were ui issue like on unselect all the text box was getting bigger. two drop down arrows were shown

UD UdhayaKumar Duraisamy Syncfusion Team February 23, 2023 06:21 PM UTC

Hi praveen,

We request you to provide additional details about the query as mentioned below, so that we were able to validate the query further and provide you with a prompt solution.

1. Exact requirement with use case scenario.

2. Issue reproducing runnable sample.

3. Issue replication steps.

4. Video illustration of the issue.


Udhaya Kumar D

Live Chat Icon For mobile
Up arrow icon