MultiSelect control does not work in a modal dialog when mode="CheckBox"

[Michael Rodriguez]

If you take your own sample application,https://stackblitz.com/edit/angular-m5h4j7 , and modify the multiselect control by adding Mode="CheckBox", you will see that it no longer works in the modal dialog. Is there a workaround for this?

[Prince Oliver]

Hi Michael, 

Thank you for contacting Syncfusion support. 

To use MultiSelect component in CheckBox mode, make sure that you have imported the MultiSelectAllModule in the app.module.ts file 

[app.module.ts] 

import { MultiSelectAllModule } from '@syncfusion/ej2-ng-dropdowns'; 

 

@NgModule({ 

  imports:      [ BrowserModule,DialogModule, FormsModule ,DropDownListModule,MultiSelectAllModule,CheckBoxModule], 

}) 

Now you need to define the mode as string. Kindly refer to the below code. 

[app.component.ts] 

public mode: string = 'CheckBox'; 

[app.component.html] 

<ejs-multiselect id='multiselectelement' #sample [dataSource]='countries' [fields]='localFields' [placeholder]='localWaterMark' [mode]='mode' [hideSelectedItem] = 'false' [value]='value1'>  

</ejs-multiselect> 

We have attached the modified sample for your reference, please refer to the following link: https://stackblitz.com/edit/angular-jjq8yu 

Regards, 

Prince 

[Michael Rodriguez]

Ok so the problem is that it specifically doesn't work in the Bootstrap modal dialog, it works in the SyncFusion modal dialog. I'm just going to switch to using the SyncFusion modal dialog instead.

Thanks!

[Prince Oliver]

Hi Michael, 

Thank you for the update. We are glad to know the issue is resolved in your end. Please let us know if you require any further assistance on this. 

Regards, 

Prince