We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Events List

Hi Team,
 I was wondering if  it exists an events list that are thrown by DropdownList component. I was looking on help section but I didn't find it.

I'm having some issues in core.js file with dropdownlist synchronicity.

For instance, if I'm doing two async requests to my server, one of them returning an array list of elements to bind to control and the another one returning an object including one of the value to be selected by the dropdown control, if I'll assign the value to dropdown before the list has binded to control,  none element is selected and in some cases core.js throws an error on line 161 saying valFn isn't a function.

I 've tried puting the second request on ngAfterContentInit, but sometimes this end before  the control has loaded all items.

Is it exist any workaround to solve it? Or maybe any event throw after last item was loaded on dropdowncontrol.


1 Reply

PO Prince Oliver Syncfusion Team August 3, 2017 04:40 PM UTC

Hi Pfs, 

Thank you for contacting Syncfusion support. 

You can use the dataBound event in the dropdownlist and set the value once the data is bound. Kindly refer to the following code snippet. 

<input id="dropdown" ej-dropdownlist [dataSource]="data" [fields]="fieldsvalues"  (dataBound)="onbind($event)"/> 

import { Component, ViewChild  } from '@angular/core'; 
import { EJComponents } from './../../../node_modules/ej-angular2/src/ej/core'; 
    selector: 'ej-app', 
    templateUrl: './home.component.html', 
export class HomeComponent { 
    data: Array<Object> = []; 
    fieldsvalues: Object; 
    @ViewChild('dropdown') dropdown: EJComponents<ej.DropDownList, any>; 
    constructor() { 
    this.data = [ 
        {text: "ListItem 1", value: "ListItem 1" }, 
        {text: "ListItem 2", value: "ListItem 2" }, 
        {text: "ListItem 3", value: "ListItem 3" }, 
        {text: "ListItem 4", value: "ListItem 4" }, 
        {text: "ListItem 5", value: "ListItem 5" }, 
    this.fieldsvalues = { dataSource: this.data, text: "text", value: "value" }; 
    onbind(args){ //triggers when data is bound to dropdownlist 
        var ddlobj = this.dropdown.widget.element.ejDropDownList("instance"); //control’s instance 
        ddlobj.setModel({ value: "ListItem 3"}); //setting value to dropdownlist 

Kindly refer to the following API documentation link for more on list of events for dropdownlist: https://help.syncfusion.com/api/js/ejdropdownlist#events 


Live Chat Icon For mobile
Up arrow icon