How to select DropdownList item from conponent code ?

[Alex]

Hello,
I am trying to use a DropdownList control in my Angular 4 application and have some questions:

1. Which is a proper way to set initial item selected once DropdownList control is rendered (in local and remote data binding) ?
2. How I can programmatically select another item in DropdownList control from component code (for example - set back initial item selected on button click event handler) ?



Please, advice.
Thanks.

[Gopi Govindasamy]

Hi Alex,  

Thanks for using Syncfusion EJ2 components. 

Query 1: Which is a proper way to set initial item selected once DropdownList control is rendered (in local and remote data binding) ? 

 

We have checked your requirement, in DropDownList component have “value” property to set proper way to item selected both local and remote date binding. Please find the details below API document link.  

API Document: https://ej2.syncfusion.com/15.4.23/angular/documentation/drop-down-list/api-dropDownListComponent.html#value  

Query 2: How I can programmatically select another item in DropdownList control from component code (for example - set back initial item selected on button click event handler) ? 

You can change selected item through programmatically using “value” property . In below sample button click take the DropDownList instance and select new item using “value” property. We have prepared sample based on your requirement.  

 

import { Component, ViewEncapsulation, ViewChild } from '@angular/core'; 

import { Query, DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data'; 

import { DropDownListComponent } from '@syncfusion/ej2-ng-dropdowns'; 

 

@Component({ 

    selector: 'control-content', 

    templateUrl: 'databinding.html', 

    styleUrls: ['databinding.css'], 

    encapsulation: ViewEncapsulation.None 

}) 

export class DataBindingDropDownListComponent { 

    // define the JSON of data 

    public sportsData: Object[] = [ 

        { Id: 'Game1', Game: 'American Football' }, 

        { Id: 'Game2', Game: 'Badminton' }, 

        { Id: 'Game3', Game: 'Basketball' }, 

        { Id: 'Game4', Game: 'Cricket' }, 

        { Id: 'Game5', Game: 'Football' }, 

        { Id: 'Game6', Game: 'Golf' }, 

        { Id: 'Game7', Game: 'Hockey' }, 

        { Id: 'Game8', Game: 'Rugby' }, 

        { Id: 'Game9', Game: 'Snooker' }, 

        { Id: 'Game10', Game: 'Tennis' } 

    ]; 

    // maps the local data column to fields property 

    public localFields: Object = { text: 'Game', value: 'Id' }; 

    // set the placeholder to DropDownList input element 

    public localWaterMark: string = 'Select a game'; 

    // set the value in dropdownlist 

    public value: string = 'Game4'; 

    // maps the remote data column to fields property 

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

    // set the height of the popup element 

    public height: string = '200px'; 

    @ViewChild('sample') 

    public ddlObj: DropDownListComponent; 

 

    onClick() { 

        this.ddlObj.value = 'Game2'; 

    } 

 

} 

Sample Link: https://plnkr.co/edit/MlPQqoP6FCHycrjG1y3U?p=preview  

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

Regards, 

Gopi G. 

 

[Alex]

Thank you for the quick response. Now it is all clear and working.

[Gopi Govindasamy]

Hi Alex,  

Most Welcome. Please get back to us if you require any further assistance on this  

Regards,  

Gopi G.