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

Hi,
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>
                            </ejs-multiselect>


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

7 Replies

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

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 () { 
            document.getElementById('AssignedUsersIds').ej2_instances[0].refresh(); 
        }); 
    }); 
 
If have placed the component inside Syncfusion tab, then  call the refresh method in the tab selected event, 
 
   function selected() { 
        document.getElementById('AssignedUsersIds').ej2_instances[0].refresh(); 
    } 
 
 
Please find the sample below, 
 
 
 
Regards, 
Sevvandhi N 



EP Elena Popova November 26, 2019 04:22 AM

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


SN Sevvandhi Nagulan Syncfusion Team November 26, 2019 04:35 AM

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



RE Renil November 19, 2021 04:29 AM

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




BC Berly Christopher Syncfusion Team November 21, 2021 10:58 PM

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. 
  
 
[app.component.ts] 
 
 // On Dialog open, 'Open' Button will be hidden 
 public dialogOpen = (): void => { 
  document.getElementById('dlgbtn').style.display = 'none'; 
  this.mulObj.refresh(); 
} 
 
  
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. 
  
 
Regards, 
Berly B.C 



EC Ed Courtney March 29, 2022 07:33 AM

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 30, 2022 05:10 PM

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.


Regards,

Ponmani M


Loader.
Live Chat Icon For mobile
Up arrow icon