How to bind Data to Dropdownlist in Kendo Ui Mobile

Posted by dinesh Haraveer on Stack Overflow See other posts from Stack Overflow or by dinesh Haraveer
Published on 2012-12-19T10:34:20Z Indexed on 2012/12/20 5:03 UTC
Read the original article Hit count: 370

Filed under:
|
|
|

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

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about ASP.NET