Dropdown with multi select

[vin]

I want a dropdown with multiselect option

[Sureshkumar P]

Hi Vin, 

 

Greetings from Syncfusion support. 

 

Based on your shared information, we suspect you want the multiple selection in dropdownliost component. We would like to say this we have multiselect component to achieve your requirement.  

 

To know more about multiselect component. Please refer the below documentation and sample link. 

 

Documentation: https://ej2.syncfusion.com/angular/documentation/multi-select/getting-started/  

 

Online demo link: https://ej2.syncfusion.com/angular/demos/#/material/multi-select/default  

 

Regards, 

Sureshkumar P 

[vin]

After add the references, i am not seeing the checkbox in the dropdown

And how do i assign the already assigned values, if any?

What might be missing?

@import '../node_modules/@syncfusion/ej2-angular-dropdowns/styles/material.css';

import { MultiSelectComponent } from '@syncfusion/ej2-angular-dropdowns';

import { CheckBoxComponent } from '@syncfusion/ej2-angular-buttons';

<ejs-multiselect id='multiselect-checkbox' #checkbox [dataSource]='productData' 

                                                [placeholder]='checkWaterMark' [fields]='productFields'

                                                [mode]='mode' [popupHeight]='popHeight' [showDropDownIcon]='true' showSelectAll='true' 

                                                [filterBarPlaceholder]='filterPlaceholder'></ejs-multiselect>

  public productData: { [key: string]: Object }[];

  public productFields: Object = { text: 'name', value: 'syndicateProductId' };

public mode : any = 'checkbox';

public checkWaterMark: string = 'Select countries';

// set the MultiSelect popup height

public popHeight: string = '350px';

public filterPlaceholder: string;

[Sureshkumar P]

Hi Vin, 

 

Query 1: 

 

After add the references, i am not seeing the checkbox in the dropdown 

 

Response: 

 

To display the checkbox in the MultiSelect DropDown component, we need to import the MultiSelectAllModule in the app.module.ts file as mentioned code example.  

  

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

  

Else, inject the CheckBoxSelection in the app.component.ts file as mentioned in the below code example.  

 

import { Component, OnInit } from '@angular/core';  

import { CheckBoxSelectionService, FilteringEventArgs } from '@syncfusion/ej2-angular-dropdowns';  

@Component({  

    selector: 'app-root',  

    // specifies the template string for the MultiSelect component  

    template: `<ejs-multiselect id='multiselectelement' [dataSource]='sportsData' [fields]='fields'(filtering)='onFiltering($event)' [mode]='mode' [placeholder]='placeholder'></ejs-multiselect>`,  

    providers: [CheckBoxSelectionService]  

})  

export class AppComponent {  

    public mode: string;  

    constructor() {  

    }  

}  

  

Please find the sample from the below link.  

  

Sample Link: https://stackblitz.com/edit/angular-hacbub-hyykvm?file=app%2Fapp.module.ts   

 

Please find the documentation from the below link.  

 

UG Link: https://ej2.syncfusion.com/angular/documentation/multi-select/checkbox/?no-cache=1   

  

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

 

Query 2: 

 

And how do i assign the already assigned values, if any? 

                                                       

Response: 

 

We can assign the already stored values to the MultiSelect component by using the value property as mentioned in the below code example. 

 

[app.component.html] 

<ejs-multiselect id='multiselect-checkbox' #checkbox [dataSource]='countries' [placeholder]='checkWaterMark' [fields]='checkFields' 

[mode]='mode' [popupHeight]='popHeight' width="150px" [showDropDownIcon]='true' allowFiltering="true" showSelectAll='true' [filterBarPlaceholder]='filterPlaceholder' [value]="value"></ejs-multiselect> 

[app.component.ts] 

export class AppComponent { 

    @ViewChild('checkbox') 

    public mulObj: MultiSelectComponent; 

    public mode: string; 

    public filterPlaceholder: string; 

    //define the data with category 

    public countries: { [key: string]: Object }[] = [ 

        { Name: 'Australia', Code: 'AU' }, 

        { Name: 'Bermuda', Code: 'BM' }, 

        { Name: 'Canada', Code: 'CA' }, 

        { Name: 'Cameroon', Code: 'CM' }, 

        { Name: 'Denmark', Code: 'DK' }, 

        { Name: 'France', Code: 'FR' }, 

        { Name: 'Finland', Code: 'FI' }, 

        { Name: 'Germany', Code: 'DE' }, 

        { Name: 'Greenland', Code: 'GL' }, 

        { Name: 'Hong Kong', Code: 'HK' }, 

        { Name: 'India', Code: 'IN' }, 

        { Name: 'Italy', Code: 'IT' }, 

        { Name: 'Japan', Code: 'JP' }, 

        { Name: 'Mexico', Code: 'MX' }, 

        { Name: 'Norway', Code: 'NO' }, 

        { Name: 'Poland', Code: 'PL' }, 

        { Name: 'Switzerland', Code: 'CH' }, 

        { Name: 'United Kingdom', Code: 'GB' }, 

        { Name: 'United States', Code: 'US' } 

    ]; 

    // map the groupBy field with category column 

    public checkFields: Object = { text: 'Name', value: 'Code' }; 

    // set the placeholder to the MultiSelect input 

    public checkWaterMark: string = 'Select countries'; 

    public value = ["AU","BM"]; 

    // set the MultiSelect popup height 

    public popHeight: string = '350px'; 

    ngOnInit(): void { 

        this.mode = 'CheckBox'; 

        this.filterPlaceholder = 'Search countries'; 

    } 

} 

 

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

 

Regards, 

Sureshkumar P. 

[vin]

Thanks, The checkbox are showing now

I am seeing this error when i add  in html

[value]="productValue"

productsIds [1,2]

[Sureshkumar P]

Hi Vin, 

 

Thanks for the update. 

 

We have tried to reproduce the reported issue based on the provided code example. Unfortunately, the reported issue is not occurred at our end. So, we have prepared the sample based on the given details and attached it below. 

 

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

 

Please check the above sample and still issue persists, please share the issue replicating sample or modify the sample with reported issue / data source details and app.component.html and app.component.ts file that will help us to check and proceed further at our end. 

 

Also, we suspect that the reported issue was reproduced due to duplicate package installation in your application. So, please remove the duplicate package by referring the below documentation. 

 

Duplicate package removable comments: https://ej2.syncfusion.com/documentation/common/how-to/update-npm-package/  

 

Regards, 

Sureshkumar P. 

 

[vin]

It was data type issue, i needed number[]

[Sureshkumar P]

Hi Vin,  

  

We have already provided the sample with the data type as number[] and attached in the previous update. So, please check the already provided sample and let us know if that resolves the issue in your end 

 

Regards,  

Sureshkumar P. 

[cipl 1177]

Hey Hi ,  I need  even one data came time i need select all  option i need how to achieve that user want like .

<div class="form-group"> 

    <ejs-multiselect 

    id="multiCheckbox" 

    [dataSource]="autoreactiveskillset" 

    [mode]="mode" 

    [showDropDownIcon]="true" 

    [filterType]="startsWidth"

    [allowFiltering]="true" 

    formControlName="skillname" 

    [enableSelectionOrder]="true" 

    name="skillname" 

                [showSelectAll]="true"

>

ejs-multiselect>  i have only one skill that time also i need select all option i want . Now how its behaviours more than one data came time only coming how to achive . then how to identify user is click select all and unselect all. User want even one data came time also select All option

[Shereen Shajahan]

Hi 

Please follow the below forum for further updates regarding your query,

Select- All' checkbox when there is only one option present in dropdown | Angular - EJ 2 Forums | Syncfusion

Regards,

Shereen