default selection of all data

[Ananya Juhi]

Hi,

Could you please tell me how to achieve the functionality for default selecting all the data in mutiselect (ejs 2 angular platform) ??

For example, when I will click on the multiselect, all the values are already selected. By default, everything is pre selected.

Thanks.

[Ilakkiya Baskar]

Hi Ananya Juhi,   

  

Thanks for contacting Syncfusion Support.  

  

We suggest you to use created event to pre select all the items in the MultiSelect component.  In that event handler, we suggest you to use the selectAll method to select the items. Please refer to the below code,   

@Component({   

  selector: 'my-app',   

     

  template: `<ejs-multiselect id='multiselectelement' #samples1(created)='onCreate($event)' [dataSource]='sportsData' [fields]='fields'[placeholder]='placeholder'></ejs-multiselect>`,   

  // include the material theme to AutoComplete,   

     

  encapsulation: ViewEncapsulation.None   

})   

export class AppComponent  {   

  name = 'Angular 6';   

   @ViewChild('samples1')   

  public ddlObject1: MultiSelectComponent;   

   //set the data to dataSource property   

   public sportsData: Object[] =  [   

      { id: 'Game1', sports: 'Badminton'}, //, selected: true   

      { id: 'Game2', sports: 'Basketball'},   

      { id: 'Game3', sports: 'Cricket'},   

      { id: 'Game4', sports: 'Football' },   

      { id: 'Game5', sports: 'Golf' }   

  ];   

  // maps the appropriate column to fields property   

  public fields: Object = { text: 'sports', value: 'id' };   

  // set placeholder to MultiSelect input element   

  public placeholder: string = 'Select games';   

  onCreate(args: any): void{   

    this.ddlObject1.selectAll(true);   

  }   

}   

Please refer to the below sample,   

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

 Please refer the below link for api information,  

https://ej2.syncfusion.com/angular/documentation/multi-select/api-multiSelectComponent.html#properties 

Note: The created event is added in the latest version 16.2.41.   

   

  

Regards,   

Ilakkiya B   

  

  

[Ananya Juhi]

Hi Ilakkiya,

Thanks for the update.

I have one more concern. Could you please tell me how can I make a dropdown or multiselect "read only" ??

For example, I have a created a student with selecting birth year from dropdown as "1993" and multiple hobbies from multiselect as "painting, reading". 

While I edit the same student data, I want the dropdown and multiselect to be fixed as read only (meaning, it cannot be editable).

Could you please help me how to achieve this?

Thanks and Regards.

[Ilakkiya Baskar]

Hi Ananya,  

We analyzed your query. 

 

We suggest you to use readOnly property for both the DropDownList and MultiSelect components. Please refer the below code, 

@Component({ 

  selector: 'my-app', 

   

  template: `<ejs-multiselect id='multiselectelement' #samples1 (created)='onCreate($event)' [readonly]=readonly [dataSource]='sportsData' [fields]='fields'[placeholder]='placeholder'></ejs-multiselect><ejs-dropdownlist id='ddlelement' #samples [dataSource]='sportsData' [fields]='fields' [placeholder]='placeholder' [readonly]='readonly'></ejs-dropdownlist> 

`, 

  // include the material theme to AutoComplete, 

 

  encapsulation: ViewEncapsulation.None 

}) 

export class AppComponent  { 

  name = 'Angular 6'; 

   @ViewChild('samples1') 

  public ddlObject1: MultiSelectComponent; 

   //set the data to dataSource property 

   public sportsData: Object[] =  [ 

      { id: 'Game1', sports: 'Badminton'}, //, selected: true 

      { id: 'Game2', sports: 'Basketball'}, 

      { id: 'Game3', sports: 'Cricket'}, 

      { id: 'Game4', sports: 'Football' }, 

      { id: 'Game5', sports: 'Golf' } 

  ]; 

  // maps the appropriate column to fields property 

  public fields: Object = { text: 'sports', value: 'id' }; 

  // set placeholder to MultiSelect input element 

  public placeholder: string = 'Select games'; 

  public readonly: boolean = true; 

  onCreate(args: any): void{ 

    this.ddlObject1.selectAll(true); 

  } 

} 

 

 

 You can also change the readonly property dynamically by using instance of the component using Viewchild decorator.  Please refer the below code 

@ViewChild('samples1') 

  public ddlObject1: MultiSelectComponent; 

….. 

this.ddlObject1.readonly=false; 

 

 

For more apis’, please refer the below documentation, 

https://ej2.syncfusion.com/angular/documentation/multi-select/api-multiSelectComponent.html 

 

Please let us know, if there is any concern. 

  

Regards,  

Ilakkiya B.  

 

[Ketan Patel]

I was getting beow error while trying to do the same.

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'

To solve this issue, I put the expression inside setTimeout.

  onCreate(args: any): void {

    setTimeout(() => {

      this.ddlObject1.selectAll(true);

    }, 0);

  }

[UdhayaKumar Duraisamy]

Hi Ketan,

We have validated the reported query on our end. Unfortunately, we couldn’t reproduce the reported issue as per your scenario. We have shared a simple working sample for your reference. Please refer to the shared code snippet and sample for more details.

[app.component.html]

      <ejs-multiselect

        #samples1

        id="multiselect-grouping"

        [dataSource]="vegetableData"

        [placeholder]="groupWaterMark"

        [fields]="groupFields"

        (created)='onCreate($event)'

      ></ejs-multiselect>

[app.component.ts]

export class AppComponent {

  @ViewChild('samples1')

  public ddlObject1: MultiSelectComponent;

 

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

    { Vegetable: 'Cabbage', Category: 'Leafy and Salad', Id: 'item1' },

    { Vegetable: 'Chickpea', Category: 'Beans', Id: 'item2' },

    { Vegetable: 'Garlic', Category: 'Bulb and Stem', Id: 'item3' },

    { Vegetable: 'Green bean', Category: 'Beans', Id: 'item4' },

    { Vegetable: 'Horse gram', Category: 'Beans', Id: 'item5' }

  ];

 

  public groupFields: Object = {

    text: 'Vegetable',

    value: 'Id',

  };

 

  public groupWaterMark: string = 'Select vegetables';

 

  onCreate(args: any): void {

    this.ddlObject1.selectAll(true);

  }

}

Sample : https://stackblitz.com/edit/angular-pkg8gt?file=app.component.ts,app.component.html

Kindly try the above suggestion and let us know if this meets your requirement. If you still face the same issue, we request that you provide additional details about the issue as mentioned below. This will help us validate the issue further and provide you with a better solution.

1. Simple issue reproducing runnable sample (or modify the shared sample).
2. Issue replication steps.
3. Video illustration of the issue.

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Regards,

Udhaya Kumar D