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

[Elena Popova]

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!!

[Sevvandhi Nagulan]

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, 

 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication1-841981117 

 

 

Regards, 

Sevvandhi N 

[Elena Popova]

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

[Sevvandhi Nagulan]

Hi Elena, 

  

Most welcome. Please let us know if you need any further assistance.  

  

Regards, 

Sevvandhi N 

[Renil]

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

[Berly Christopher]

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. 

 

Sample Link: https://stackblitz.com/edit/angular-hleze9-bohzb5?file=app.component.ts   

  

 

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 

[Ed Courtney]

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?

[Ponmani Murugaiyan]

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

[praveen kumar]

Hi,

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

[UdhayaKumar Duraisamy]

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.

Regards,

Udhaya Kumar D