All list values are not showing in kendoComboBox

See more:

jQuery

WebSockets

want to bind list of values to kendoCombobox from dataBase through webservices.
Here is the code

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

$(document).ready(function () 
$("#CbxArea").kendoComboBox();       
var cmbArea = $("#CbxArea");        
$.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++) {
cmbArea.append($("<option></option>").val(data.d[i].AreaName).html(data.d[i].AreaName));
}
}
});

List of values are coming successfully, but the problem is only 1st value is showing in combobox, remaining values are not displaying (i have 16 values in list)
if i write $("#CbxArea"); instead of $("#CbxArea").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.

Please help.
thanks,
parsanamoni.