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

multi select Dropdown

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

7 Replies

AB Ashokkumar Balasubramanian Syncfusion Team May 29, 2019 04:37 PM UTC

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 
 
 
 
Please let us know, if you have any concern on this. 
 
Regards, 
Ashokkumar B. 



SU sunithra May 30, 2019 09:21 AM UTC

Hi

API Link

Its not workout to me.
Kindly share any example .

Advance in Thanks

Regards

Sunithra.C


PO Prince Oliver Syncfusion Team May 31, 2019 08:48 AM UTC

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:  

If you need further assistance, please let us know. 

Regards, 
Prince 



SU sunithra June 3, 2019 01:21 PM UTC

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


VK Vinoth Kumar Sundara Moorthy Syncfusion Team June 4, 2019 01:56 PM UTC

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"; 
 
 
Could you please check the above sample and get back to us if you need any further assistance on this? 
 
Regards, 
Vinoth Kumar S 



SU sunithra replied to Vinoth Kumar Sundara Moorthy June 14, 2019 11:08 AM UTC

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"; 
 
 
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


PO Prince Oliver Syncfusion Team June 17, 2019 12:51 PM UTC

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 

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 

Regards, 
Prince 


Loader.
Live Chat Icon For mobile
Up arrow icon