How to bind Data to Dropdownlist in Kendo Ui Mobile
- by dinesh Haraveer
I have been using Kendo Mobile to develop an application, previously same application i have done in Kendo web,it's works fine.The main problem is that i have to bind data to two dropdownlist which the below code i have written,when my application is running it show an error like "Microsoft JScript runtime error: Object doesn't support property or method 'append'".
in HTML
<div id="forms" data-role="view" data-title="Form Elements" data-init="initForm">
<table>
<tr>
<td>
<label style="margin-left: 20px">
Company:</label>
</td>
<td>
<select id="ddlCompany" style="width: 200px">
<option>Select Company</option>
</select>
</td>
<td class="style1">
<label style="margin-left: 20px">
Category:</label>
</td>
<td>
<select id="ddlCategory" style="width: 200px">
<option>Select Category</option>
</select>
</td>
<td>
<label style="margin-left: 20px">
Product :</label>
</td>
<td>
<select id="ddlProduct" style="width: 200px">
<option>Select Product</option>
</select>
</td>
</tr>
</table>
</div>
function initForm() {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "FlashReportMobileWebService.asmx/GetCompany",
dataType: "json",
success: function (data) {
for (i = 0; i < data.d.length; i++) {
ddlCompany.append($("<option></option>").val(data.d[i].Company).html(data.d[i].Company));
};
$("#ddlCompany").kendoDropDownList();
}
});
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "FlashReportMobileWebService.asmx/ToCategoryDropDown",
dataType: "json",
success: function (data) {
for (i = 0; i < data.d.length; i++) {
ddlCategory.append($("<option></option>").val(data.d[i].Category).html(data.d[i].Category));
};
$("#ddlCategory").kendoDropDownList();
},
failure: function (msg) {
alert(msg);
}
});
}
$("#ddlCategory").change(
function (e) {
var ddlProduct= $("#ddlProduct");
var dataItem = $("#ddlCategory").val();
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
data: "{'Category':'" + dataItem + "'}",
url: "FlashReportWebService.asmx/ToFillProductDropDown",
dataType: "json",
success: function (data) {
ddlProduct.empty();
for (i = 0; i < data.d.length; i++) {
ddlProduct.append($("<option></option>").val(data.d[i].ProductName).html(data.d[i].ProductName));
};
$("#ddlProduct").kendoDropDownList();
},
failure: function (msg) {
alert(msg);
}
});
});
var app = new kendo.mobile.Application(document.body);
thanks for reading this
