Prepopulate selected data in ejmultiselect and ejdropdowns

[Prangya Tiwari]

Hi,

Could you please provide me an example on how to preselect data in MultiSelect/DropDownList.

Is there any method for MultiSelectComponet available to do so ?

Thanks

Prangya

[Gopi Govindasamy]

Hi Prangya, 

Thanks for using Syncfusion EJ2 components. 

DropDownLit: 

We have provided “value” property for preselect data in dropdownlist component. We have prepared simple sample for used value property and we have provided API documentation link for your reference.  

@Component({ 

    selector: 'app-container', 

    // specifies the template string for the DropDownList component with change event 

    template: `<ej-dropdownlist id='ddlelement' #samples [dataSource]='data' [fields]='fields' [placeholder]='text' [query]='query' [sortOrder]='sorting' 

    [value] = 'value'></ej-dropdownlist>` 

}) 

export class AppComponent { 

    constructor() { 

    } 

    //bind the DataManager instance to dataSource property 

    public data: DataManager = new DataManager({ 

            url: 'http://services.odata.org/V4/Northwind/Northwind.svc/', 

            adaptor: new ODataV4Adaptor, 

            crossDomain: true 

        }); 

    // maps the appropriate column to fields property 

    public fields: Object = { text: 'ContactName', value: 'CustomerID' }; 

    //bind the Query instance to query property 

    public query: Query = new Query().from('Customers').select(['ContactName', 'CustomerID']).take(6), 

    //set the placeholder to DropDownList input 

    public text: string = "Select a customer"; 

    //sort the result items 

    public sorting: string = 'Ascending'; 

    // set the value in dropdownlist 

    public value: string = 'ALFKI'; 

} 

Sample Link: http://plnkr.co/edit/MWt94c9QIpk8hiXpEbZ6?p=preview  

API Link: http://npmci.syncfusion.com/production/angular/documentation/drop-down-list/api-dropDownListComponent.html#value  

MulitSelect: 

We have confirmed that the issue (“Multiselect preselect value in mutliselect”) in multiselect . We will be included  this fix in the upcoming release Vol1 2018. which will be rolled out by February last midst. We will let you know once it has been rolled out 

Please let us know if you have any concern, we will happy to help you. 

Regards,
Gopi G. 

 

[Prangya Tiwari]

Hello,

Thank you for update.Could you please provide the date when upcoming release would be rolled out.

[Gopi Govindasamy]

Hi Prangya,    

  

Thanks for patience.    

  

We will include “Multiselect preselect value” issue fix in the upcoming release Vol1 2018. which will be rolled out by this week. We will let you know once it has been rolled out    

  

Regards,   

Gopi G.   

[Ananya Juhi]

Hi,

Could you please tell me if the multiselect prepoluation of data issue fix is released yet ??

Thank you.

[Ilakkiya Baskar]

Hi Prangya,       

     

Thanks for patience.       

     

We have fixed the reported issue (Multiselect preselect value) and rolled out in v16.1.0.24-Main release. Now, you can upgrade the npm package on your application.       

Please let us know, if you have any other concern, we will happy to assist you.        

     

Regards     

Ilakkiya B     

[Ananya Juhi]

Hi ,

Could you please provide me an example to prepopulate data (dynamically fetched) in <ejs-multiselect> (angular 2).

Thanks.

[Ilakkiya Baskar]

Hi Prangya,    

  

Thanks for using Syncfusion EJ2 components.    

  

We have provided “value” property for preselect data in MultiSelect component. We have prepared simple sample for dynamically changed dataSource and value properties.  The below sample, initially will load remote data after the button click load the local data.    

  

@Component({   

    selector: 'app-container',   

    // specifies the template string for the MultiSelect component   

    template: `<ejs-multiselect id='multiselectelement' #multiselectelement [dataSource]='data' [fields]='fields' [placeholder]='placeholder' [query]='query' [sortOrder]='sorting' [value]='value'></ejs-multiselect>`   

})   

export class AppComponent {   

    constructor() {   

    }   

      

    ngAfterViewInit() {   

      // Set null value to value property for clear the selected item   

        document.getElementById('btn').onclick = () => {   

          this.multiSelectObject.dataSource =  [   

              { id: 'Game1', sports: 'Badminton' },   

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

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

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

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

          ];   

          // maps the appropriate column to fields property   

          this.multiSelectObject.fields = { text: 'sports', value: 'id' };   

          //bind the Query instance to query property   

          this.multiSelectObject.query = new Query().take(5);   

           // set the value   

          this.multiSelectObject.value = ['Game2'];   

        }   

    }   

    //bind the DataManager instance to dataSource property   

    public data: DataManager = new DataManager({   

            url: 'http://services.odata.org/V4/Northwind/Northwind.svc/',   

            adaptor: new ODataV4Adaptor,   

            crossDomain: true   

    });   

    // maps the appropriate column to fields property   

    public fields: Object = { text: 'ContactName', value: 'CustomerID' };   

    //bind the Query instance to query property   

    public query: Query = new Query().from('Customers').select(['ContactName', 'CustomerID']).take(5);   

    // set placeholder to MultiSelect input element   

    public placeholder: string = 'Select customers';   

    //sort the result items   

    public sorting: string = 'Ascending';   

    // set the value   

    public value:sting[] = ['ALFKI'];   

     @ViewChild('multiselectelement')   

    public multiSelectObject: MultiSelectComponent;   

}   

  

Sample Link: http://plnkr.co/edit/4lQn53JMe7UTk509H3Tw?p=preview   

   

  

API Link: http://npmci.syncfusion.com/production/angular/documentation/multi-select/api-multiSelectComponent.html#value   

  

Please let us know if you have any concern, we will happy to help you.    

  

Regards
Ilakkiya B    

[Ananya Juhi]

Hi,

Thanks for providing the example. Although I have some doubts.

If you could please explain the below line,

public value : sting[] = ['ALFKI'];

From where does that string came (['ALFKI']). Is it somewhere in the api ? Or is it hardcoded. 

I want a dynamic data to be pre selected in the multi select.

My requirement is when I edit one record, the edit form opens up and it must be pre selected with the existing data for that record.

[Ilakkiya Baskar]

Hi Prangya, 

Thank you for your details. 

We analyzed your query. As per your requirement, we attached the sample.  In this sample, when the table element undergoes editing, the dialog shows with multiselect that has preselect value which is in the table element. 

Please refer the code block, 

@Component({ 

  selector: 'my-app', 

  template: `<div id='targetElement'> 

   <table cellpadding="2" cellspacing="0" border="1" width="50%"> 

<tr> 

   <th> 

      <div> 

         <input value="Data"/> 

      </div> 

   </th> 

</tr> 

<tr> 

   <td> 

      <div> 

         <input (keydown)="alertBtnClick($event)" value="Basketball"/> 

      </div> 

   </td> 

</tr> 

<tr> 

   <td> 

      <div> 

         <input (keydown)="alertBtnClick($event)" value="Cricket"/> 

      </div> 

   </td> 

</tr> 

</table> 

  <button ejs-button class='dlgbtn' id='alertbtn' #alertButton (click)="alertBtnClick()">Alert</button> 

   

  <ejs-dialog #alertDialog [visible]='hidden' [header]='alertHeader' [animationSettings]='animationSettings' [content]='alertContent' [showCloseIcon]='showCloseIcon' (open)="dialogOpen()" (close)="dialogClose()" [target]='target' 

  [width]='alertWidth'> 

</ejs-dialog></div>`, 

  // include the material theme to AutoComplete 

   

  styleUrls: ['../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css', 

  '../../node_modules/@syncfusion/ej2-popups/styles/material.css'], 

  encapsulation: ViewEncapsulation.None 

}) 

export class AppComponent  {  

    

    public alertHeader: string = 'Low Battery'; //dialog header 

    public alertContent: string = '<div id=dropdownist></div>'; // multiselct 

    public hidden: Boolean = false; 

    public alertWidth: string = '250px'; 

    public showCloseIcon: Boolean = false; 

    public animationSettings: Object = { effect: 'None' }; 

    public hide:any; 

    public alertDlgButtons: Object[] = [{ click: this.alertDlgBtnClick, buttonModel: { content: 'Dismiss', isPrimary: true } }]; //it is for button if you want use a button to show the dialog with multiselect 

    @ViewChild('alertDialog') 

    public alertDialog: DialogComponent; 

    public listObj: MultiSelect = new MultiSelect({ 

        // set the placeholder to MultiSelect input element 

        placeholder: 'Favorite Sports', 

        // set the type of mode for how to visualized the selected items in input element. 

        mode: 'Box', 

        dataSource: ["Basketball","Cricket"] 

    }); 

     

     

    alertDlgBtnClick() { 

        this.hide(); 

    } 

    alertBtnClick(args :any) { 

         

        this.listObj.value=[args.currentTarget.defaultValue]; 

        this.listObj.appendTo("#dropdownist"); //multiselect append to the dialog 

        this.alertDialog.show(); 

        this.dialogOpen(); 

    } 

    // On Dialog close, show the buttons 

//  

 } 

 

We have attached the sample in the below location, 

http://www.syncfusion.com/downloads/support/forum/135739/ze/quickstart1792055295 

Let us know if there is any concern, we will be happy to assist you. 

Regards, 

Ilakkiya B