1. Home
  2. Forum
  3. Angular - EJ 2
  4. How to set default selected value in ej-dropdownlist

How to set default selected value in ej-dropdownlist

Hi support team,

i'm working on Angular, .NET application and i'm using various Syncfusion controls. My question could sound very simple but i'v lost a lot of my time trying to do one simple thing. I'm trying to set default selected value for my dropdown list. I have tried this on various ways, some suggested on your official page, some from forum and finally i tried to improvise this but nothing works!   

I'm populating this dropdown with datasource which is set of JSON objects and this works perfectly fine.  I also have explicitly defined what is my value and what is text for this dropdown. At the end everything works great dropdown is populated, my event on select also works but unfortunately i can't set default selected value when this component is initial loaded.

Some code example:

component.html

<input id="shortName" ej-dropdownlist [dataSource]="shortNames" [fields]="fieldsvalues" (select)="shortNameSelected($event)" [enableFilterSearch]="filterSearchEnabled" [filterType]="filterSearchType" />

component.ts

fieldsvalues : any;
shortNames : any;

constructor(private shortNameService: ShortNameService) {
      this.fieldsvalues = { text: "text", value: "value" };

      this.shortNames =[ some data gotten from service... ]
}

Can you please provide some help?

Best regards,
Goran.

6 Replies
IB Ilakkiya Baskar Syncfusion Team March 7, 2018 09:21 AM UTC

Hi Garon, 
Thank you for contacting Syncfusion Support. 
We checked your code snippet and we suggest you to use value property of the DropDownList widget to set default selected value on initial time. Please refer the code snippet 
 
<input id="bookSelect" ej-dropdownlist [dataSource]="data" [fields]="fieldsvalues" width="50%" [value]="value"/>      
  
We have prepared a sample for your reference which can be seen from the following link 
For more information, please refer, 
https://help.syncfusion.com/angular/dropdownlist/functionalities#using-value-or-text 
Regards 
Ilakkiya B 



GO Goran March 9, 2018 09:34 AM UTC

Hi  Ilakkiya,

at first thanks for response. Unfortunately answer that  you have provided doesn't work in my case and this solution is the first thing that i'v tried and i believe that is official solution in your angular api guide . In example that you have sent me your data source is hardcoded  and this works perfectly fine in my case also but if you try to get some data from external database (like i'm doing in my app) and if you use this data like data source preselecting of default value doesn't work. 

One strange thing that i should mention is that i'v noticed, value property that i sett like you explained in your official angular api guide and in this example that you have sent me actually it's shown on very short period (millisecond) and it's disappear on initial load . I assume that default value is shown until service get data from database and than blank element replace default value  during populating dropdown with data.

Just to make it clear my datasource is populated correctly and all elements are listed in my dropdown list but part where i'm setting  default value that works when my data source is hardcoded doesn't work for this case when i'm calling service to get data from database.

I'm really sorry but i don't see a way how can i reproduce this problem for you because like i have mentioned this problem exist only when you are getting data from database so please try this with that scenario where you use database . In my case i'm using C# like backand language, web api to get data from database, entity framework to create model classes and Angular 4.

Hope that i'v explained my problem better this time.

Best regards,
Goran.
       


IB Ilakkiya Baskar Syncfusion Team March 12, 2018 11:08 AM UTC

Hi Goran,   
   
We suggest you to use the Datamanager and set the value property in the DropDownList widget. Please refer to the below link for more information.   
Please refer to the below code snippet:   
   
   
import { Component } from '@angular/core';
import { DropDownListComponent } from '@syncfusion/ej2-ng-dropdowns';
import { DataManager, Query, WebApiAdaptor } from '@syncfusion/ej2-data';

@Component({
selector: 'app-container',
// specifies the template string for the DropDownList component with change event
template: `<ejs-dropdownlist id='ddlelement' #samples [value]="val" [dataSource]='data' [query]='query' [placeholder]='text'></ejs-dropdownlist>`
})
export class AppComponent {
constructor() {
}
//bind the DataManager instance to dataSource property
public items: Object[];
public text: string = "Select";
public val: string ="value1";
public data: DataManager = new DataManager({
url: 'http://localhost:62779/api/values',
adaptor: new WebApiAdaptor,
crossDomain: true
});
//bind the Query instance to query property
public query: Query = new Query().take(6);


}  
   
    
You must run the below sample to get data from the WebAPIController, and place the hosted url in the DataManager url property.  
   
Please ensure this at your end and if issue persists, kindly revert.    
   
Regards   
Ilakkiya B   


GO Goran March 12, 2018 12:14 PM UTC

Hi  Ilakkiya,

i'm sorry i realize that my question should be part of angular not angular-ej2 forum. I'v just spotted that you are using for @syncfusion/ej2-data which is not available this type of project. Should i repost this on angular forum or you can give me answer related with this here. Once again i'm really  sorry!

Kind regards,
Goran.

GO Goran March 13, 2018 08:53 AM UTC

Hi  Ilakkiya,

sorry for inconvenience, i succeed to implement your final example and it works!

Once again sorry and thanks for support!

Best regards,
Goran. 

IB Ilakkiya Baskar Syncfusion Team March 13, 2018 01:53 PM UTC

Hi Goran,
 
Thanks for your update.
 
We are glad to hear that your problem is resolved. Please get back to us if you need further assistance.
 
Regards, 
Ilakkiya B
 


Loader.
Up arrow icon