Question

I want to bind a list of values to a kendoCombobox from dataBase through webservices.

Here is the code :

<select id = "CbxArea" style="width:200px">
</select>

$(document).ready(function () {
    var cmbArea = $("#CbxArea"),
        area;        
    cmbArea.kendoComboBox();  

    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "FlashReportWebService.asmx/GetAreaNames",
        dataType: "json",
        success: function (data) {
            for (i = 0; i < data.d.length; i++) {
                area = data.d[i].AreaName;
                cmbArea.append($("<option> </option>").val(area).html(area));
            }
        }
    });
});

List of values are coming successfully, but the problem is that only the 1st value is showing in combobox, remaining values are not displaying (I have 16 values in list).

If i write cmbArea; instead of cmbArea.kendoComboBox(); total 16 values are displaying in comboBox. Is there any problem in kendoComboBox for binding values from .asmx page?

I must display values in kendoComboBox only.

Answer 1

As I replied in the Kendo forums the Kendo Combobox will not show <option> elements appended to the original <select>. You need to initialise the combobox after the options are created:

$(document).ready(function () {
    var cmbArea = $("#CbxArea"),
        area;        


    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "FlashReportWebService.asmx/GetAreaNames",
        dataType: "json",
        success: function (data) {
            for (i = 0; i < data.d.length; i++) {
                area = data.d[i].AreaName;
                cmbArea.append($("<option> </option>").val(area).html(area));


            }

            cmbArea.kendoComboBox(); 
        }
    });
});

Using the Kendo DataSource is also an option and would reduce your code quite a bit.