ejDropDownList - dataBound event not firing

[Majd Alkassem]

I am using the ejDropDownList with WebAPI data source, and I need to set the selected value once the dropdownlist is bound. I tried using the dataBound event, but it does seem to ever get called. The data does get populated in the list. Please see sample code below:

var pickerData = ej.DataManager({

url: "/api/Get/List",

crossDomain: true,

adaptor: new ej.WebApiAdaptor()

});

var pickerQuery = new ej.Query().addParams("id", id);

$("#ddl").ejDropDownList({

dataSource: pickerData,

query: pickerQuery,

fields: { text: "text", value: "value" },

targetID: "ddlList",

dataBound: function (args) {

debugger;

}

});

[Keerthana Rajendran]

Hi Majd, 

 

Thank you for contacting Syncfusion support 

 

We have prepared  a DropDownList sample with webAPI adaptor. dataBound event is fired when the items are bound to DropDownList. We have set selected value in DropDownList during dataBound event using value property. Please refer to the below code 

 

<div class="cols-sample-area"> 

    <input type="text" id="myList" /> 

</div> 

<script type="text/javascript"> 

     $(function () { 

        var dataManager = ej.DataManager({ 

            url: "../api/Orders", 

            adaptor: new ej.WebApiAdaptor(), 

            crossDomain: true, 

            query: ej.Query().select("CustomerID") 

        }); 

        $("#myList").ejDropDownList({ 

            dataSource: dataManager, 

            fields: { text: "CustomerID", value: "CustomerID" }, 

            dataBound: "ondatabound" 

        }); 

    }); 

    function ondatabound(args) { 

        var obj = $("#myList").data("ejDropDownList"); 

        obj.setModel({ value: args.data[2].CustomerID }); 

    } 

</script> 

 

We have prepared a sample for your reference. Please refer to the below given link 

Sample: http://www.syncfusion.com/downloads/support/forum/131670/ze/DDL-1225994531.zip 

We can also use actionComplete event of DropDownList for this requirement. Please refer to the below code 

$("#myList").ejDropDownList({ 

            dataSource: dataManager, 

            fields: { text: "CustomerID", value: "CustomerID" }, 

            actionComplete: "complete" 

        }); 

    }); 

    function complete(args) { 

        var obj = $("#myList").data("ejDropDownList"); 

        obj.setModel({ value: args.e.result[2].CustomerID }); 

    } 

 

If the issue persists kindly get back to us by modifying the above sample to reproduce the issue along with the product version used in your project so that we can proceed further. 

Regards, 

Keerthana.