multi select Dropdown

[sunithra]

Hi

I Need an control for Multi selection of listed users with search control,once we select the user it should be shown separately in the header,so we need a control like this kindly find the attached image what we need exactly on that but in fusion we can't able to achieve exactly as like in mock up,so we need your help to achieve this and also I need POPUP is always Open .

I need  a  Popup is always open .

Thank &   Regards,

Sunithra.C

Attachment: screenshotwww.figma.com2019.05.27203135_(1).png_e826ca2d.zip

[Ashokkumar Balasubramanian]

Hi sunithra, 

 

Greetings from Syncfusion support. 

 

We have analyzed your provided screenshot at our end. For this scenario, we suggest you use the Multiselect dropdown with filtering support. For this support, it will add the filtered value to input element.  

 

In multiselect with checkbox mode when you select the value from the popup it will not close and it remains as opened. It box, delimiter and default when you select the value the popup will closed. In that case we suggest you use our property closePopupOnSelect as true. 

 

Please find the sample and API link from below link 

 

Sample Link: https://ej2.syncfusion.com/angular/demos/#/material/multi-select/checkbox 

 

API Link: https://ej2.syncfusion.com/angular/documentation/api/multi-select#closepopuponselect 

 

Please let us know, if you have any concern on this. 

 

Regards, 

Ashokkumar B. 

[sunithra]

Hi

API Link

https://ej2.syncfusion.com/angular/documentation/api/multi-select#closepopuponselect

Its not workout to me.

Kindly share any example .

Advance in Thanks

Regards

Sunithra.C

[Prince Oliver]

Hello Sunithra, 

Good day to you. 

We've enabled the popup to always be in an open state according to your requirement. We achieved this by using the created event to show the popup on the initial load and using the close event to prevent the popup from closing. Please refer to the following snippet code. 

[HTML] 

<ejs-multiselect id='multi-template' #template [dataSource]='multidata' [fields]='multifields' [mode]='box' 

  (close)='onClose($event)' (created)='onCreate($event)' [placeholder]='multiwatermark'> 

. . . . . . . . . . . . . . . . . . . . . . . . 

</ejs-multiselect> 

[TS] 

public onClose: EmitType<PopupEventArgs> = (e: PopupEventArgs) => { 

  e.cancel = true; 

}; 

public onCreate: EmitType<Object> = (e: Object) => { 

  this.mulObj.showPopup(); 

}; 

Please find the sample at the following location:  

https://stackblitz.com/edit/angular-ztuarz 

If you need further assistance, please let us know. 

Regards, 

Prince 

[sunithra]

Hi

Its not workout in popup [dialog pop] and in additional i need multi select as static height then inside need a scroll .

Thanks in Advance.

Regards,

Ssunithra.C

Attachment: Screenshot_from_20190603_184445.png_cbfc99fa.zip

[Vinoth Kumar Sundara Moorthy]

Hi Sunithra, 

 

Good day to you. 

 

We have checked the reported scenario and while checking the screenshot you have shared it seems you have used box mode in multiselect. In box mode the popup will be closed after value has been selected. So, in box mode we suggest you to use closePopupOnSelect as false. In MultiSelect default height will be set as auto. The scroller will be created based on the popupHeight. So, change the height of the popup use the popupHeight property. Please refer the code snippet 

 

[html] 

<ejs-multiselect id='sample-list2' [dataSource]='sportsData' [mode]='box' [fields]='fields' [placeholder]='waterMark' [closePopupOnSelect]="false" [popupHeight]='height'></ejs-multiselect> 

 

[ts] 

public height: string = "200px"; 

 

Sample Link: https://stackblitz.com/edit/angular-xszy3j?file=app.component.html 

 

Could you please check the above sample and get back to us if you need any further assistance on this? 

 

Regards, 

Vinoth Kumar S 

[sunithra]

Hi Sunithra, 

 

Good day to you. 

 

We have checked the reported scenario and while checking the screenshot you have shared it seems you have used box mode in multiselect. In box mode the popup will be closed after value has been selected. So, in box mode we suggest you to use closePopupOnSelect as false. In MultiSelect default height will be set as auto. The scroller will be created based on the popupHeight. So, change the height of the popup use the popupHeight property. Please refer the code snippet 

 

[html] 

<ejs-multiselect id='sample-list2' [dataSource]='sportsData' [mode]='box' [fields]='fields' [placeholder]='waterMark' [closePopupOnSelect]="false" [popupHeight]='height'></ejs-multiselect> 

 

[ts] 

public height: string = "200px"; 

 

Sample Link: https://stackblitz.com/edit/angular-xszy3j?file=app.component.html 

 

Could you please check the above sample and get back to us if you need any further assistance on this? 

 

Regards, 

Vinoth Kumar S 

Hi

Thanks for Response for Multi - Selecting Component but still we can't achieve the exact UI & functionality,So we need your help on this,if we open the popup list of users are available in the drop down when we do selection its get selected but if we close the popup popup get closed but drop down list is not get closed its showing on the back ground,so we need your help on this,Kindly check the attachment  for your reference. Reply as soon as Possible.

Thanks in Advance .

Thanks & Regards

Sunithra.C

Attachment: demo_a24ce43f.zip

[Prince Oliver]

Hi Sunithra, 

Thank you for your update. 

We have checked the shared code snippet in the sample. But we were unable to replicate the reported issue in our end. We suspect that you might have overridden some of the styles of the multiselect component and hence the issue has occurred. Also, please ensure that when rendering the MultiSelect component in the dialog, the multiselect component’s z-index is greater than the dialog component. Use the zIndex property to increase or increase the zindex of the element. Please refer to the following API link 

https://ej2.syncfusion.com/documentation/api/multi-select#zindex 

If still issue persists, kindly provide us the adequate information to reproduce the issue in our end. This will help us provide a prompt solution 

Test sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/syncfusion-angular-multiselect2-1250096632 

Regards, 

Prince