Dropdown search not working and default selected value is not displaying

Question

Please refer this code samplehttps://stackblitz.com/edit/angular-dropdownlist-value-eevepc?file=app.component.htmlAbove code sample have two issue.Selected item is not displaying in dropdownWhen user search in dropdown, then data is coming but it not reflecting in dropdown

Berly Christopher · Accepted Answer

Hi Jayesh, 
  
As we stated earlier, if you set the value which is not available in the assigned data source item, then the assigned value not displayed in the component. So, we suggest you to set the required value in the element of the DropDownList component. 
  




onCreate() { 
  setTimeout(() => { 
    (this.dropObj as any).inputElement.value = "IN - India"; 
  }, 5); 
} 
 
  
Also, we have provided the updateData method in the filtering event arguments. We can pass the data source where you want to filter the value based on the entered text. Kindly refer the below code example, 
  
API Link: https://ej2.syncfusion.com/angular/documentation/api/drop-down-list#filtering  
  
Here, the entered text will be searched from the data source which is stored in the variable named as “users”.  
  




filterText(args) { 
    var query = new Query().select(["Name", "Id"]).take(10); 
    var predicateQuery = query.where( 
      new Predicate("Name", "startswith", args.text, true).or( 
        "Id", 
        "startswith", 
        args.text, 
        true 
      ) 
    ); 
    query = args.text !== "" ? predicateQuery : query; 
    args.updateData(this.users, query); 
  } 
  
Sample Link: https://stackblitz.com/edit/angular-dropdownlist-value-e2hrvf?file=app.component.ts  
  
Regards, 
Berly B.C

Berly Christopher · Answer

Hi Jayesh,

Greetings from Syncfusion support.

Query 1:

Selected item is not displaying in dropdown

Response:

While analysed the sample, you set the value property which is not available in the assigned data source object. As a result, the specified "India" does not appear in the DropDownList. So, we suggest you to assign the value that is available in the assigned data source object as mentioned below.

// Default selected item in dropdown

public selectedItem: string = "Australia";

Screenshot:

Query 2:

When user search in dropdown, then data is coming but it not reflecting in dropdown

Response:

In the shared sample, you have written the code for filtering in the users.ts file. Based on the written code, we suspect that you want to filter the text which is available both in the “Name” and “Id” field. But we can achieve this requirement by using predicates query without any external code in the DropDownList component mentioned in the below code example.

API Link: https://ej2.syncfusion.com/documentation/api/data/predicate/

This will help us to filter the value entered by the text in using more than one filed mapped in the DropDownList component.

filterText(args) {

var query = new Query().select(["Name", "Id"]);

var predicateQuery = query.where(

new Predicate("Name", "startswith", args.text, true).or(

"Id",

"startswith",

args.text,

true

)

);

query = args.text !== "" ? predicateQuery : query;

args.updateData(this.data, query);

}

<ejs-dropdownlist id="ddlelement" #samples [dataSource]="data" [fields]="fields" [placeholder]="text"

[(ngModel)]="selectedItem" [itemTemplate]="itemTemplate" [valueTemplate]="valueTemplate" [(value)]="selectedItem"

(filtering)='filterText($event)' [allowFiltering]='true'>

<ng-template #itemTemplate="" let-data="">

</ng-template>

<ng-template #valueTemplate="" let-data="">

</ng-template>

</ejs-dropdownlist>

Sample Link: https://stackblitz.com/edit/angular-dropdownlist-value-xq2nbg?file=app.component.html

Regards,

Berly B.C

{{ data.Id }} - {{ data.Name }}

Sample Link: https://stackblitz.com/edit/angular-dropdownlist-value-xq2nbg?file=app.component.html Regards, Berly B.C

Jayesh Tajane · Answer

Hello Berly,You said "the specified "India" does not appear in the DropDownList". My question is it necessary to have India in DropDownList?Now assume instead of users.ts file we are fetching data from database through api request. we have 1000 countries record in database and we have to show only 100 record at very first time when DropDownList render. In first 100 record India will not come. When user search in dropdown then filterText() function will hit the api and get the result. For example user search "ind" then filterText() function will hit the api get the list of countries which name starts with 'ind'. In my case list look like this[  { Name: "India", Id: "Ind" },  .....]Let me know how i can achieve this scenario.