Pre select data from server in dropdown and multiselect

[Ananya Juhi]

Hi,

Can you please tell me how to preselect data (coming from server) in a dropdown and multiselect ??

For example, I have a create modal with a form where I am filling up the dropdown and multiselect details and sending it to the server.

Now, I want that when I open the edit modal, I want to have the data stored in the database, should get pre selected in the dropdown and multiselect automatically.

Can you please provide me with an example?

I am using ejs dropdown and multiselect with angular 2.

Thanks and Regards :)

[Ilakkiya Baskar]

Hi Ananya,  

Thank you for contacting Syncfusion support. 

We analyzed your query. We suggest you to use FormGroup object to setting the value initially in the DropDownList components. Please refer the below code, 

<ejs-dropdownlist #name id='name' formControlName="name" name="name" [zIndex]="zIndex"  [dataSource]='data' [fields]='fields1' [query]='query1' [placeholder]='placeholder'></ejs-dropdownlist> 

 

ngOnInit(): void { 

    this.heroForm = new FormGroup({ 

      'name': new FormControl("", [ //you can give the value here also 

        Validators.required, 

 

      ]), 

      'alterEgo': new FormControl(this.hero.alterEgo, [ 

        Validators.required]), 

      'power': new FormControl(this.hero.power, Validators.required) 

    }); 

     

  } 

 

 

Or else, you can give the value in ngAfterViewInit hook with the help of instance of the control. Please refer the code  

@ViewChild('name') public object: DropDownListComponent; 

  ngAfterViewInit(): void { 

 

    this.object.value='ALFKI'; 

  } 

 

You can also give the value which is extracted from the server using button click event handler. Please refer the below code, 

 

<ejs-dropdownlist #name id='name' [value]='val' formControlName="name" name="name" [zIndex]="zIndex" (created)='oncreate($event)' [dataSource]='data' [fields]='fields1' [query]='query1' [placeholder]='placeholder'></ejs-dropdownlist> 

 

                     

<button type="button" class="btn btn-default" (click)="click($event)">Click</button> 

 

 

click(args: any): void{ 

   

  let predicate: Predicate = new Predicate("CustomerID", "equal", "ALFKI"); 

  new DataManager({ url: "http://services.odata.org/V4/Northwind/Northwind.svc/", adaptor: new ODataV4Adaptor }) 

    .executeQuery(new Query().from("Customers").select(["ContactName", "CustomerID"]).where(predicate).take(1)) 

    .then((e: ReturnOption) => { 

      console.log(e.result); 

      this.object.value = e.result[0].CustomerID; 

    }); 

} 

 

 

For MultiSelect, we have faced an issue. We will provide the fix in the upcoming patch release. 

Please refer the below sample, 

http://www.syncfusion.com/downloads/support/forum/138395/ze/Sample1214620596 

In the above sample, the value gets selected when the dialog is opened. 

Please let us know, if there is any concern. 

  

Regards,  

Ilakkiya B.  

[Shannon Hill]

Has the issue with pre-selecting values with Multi-Select been patched yet?  It does not yet seem to work.  I have followed most of the examples posted throughout the site and I cannot get pre-selected values to work.  I can get data to load, but any pre-selected items set via the "value" property are ignored.

[Prince Oliver]

Hello Shannon, 

Thank you for contacting us. We have fixed the reported issue the version 16.2.43. Kindly refer to the following release notes section: https://ej2.syncfusion.com/documentation/release-notes/16.2.43/#multiselect 

We suggest you upgrade to the latest version to resolve this. 

Regards, 

Prince