Home/ Questions/Q 9093539
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T23:07:41+00:00

I have two dropdownlist’s one is category and another is products.When i’m selecting category

  • 0

I have two dropdownlist’s one is category and another is products.When i’m selecting category dropdownlist,according to that category the products has to bind to Products dropdownlist,from web service the data is coming to products dropdown but is not visible,before selection as a plain page(without selection) products dropdownlist is visible.

Here i’m providing my code

 $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "WebService.asmx/ToFillCategoryDropDown",
        dataType: "json",
        success: function (data) {
            var dataSource = [];
            for (i = 0; i < data.d.length; i++) {
                dataSource.push({ "CategoryName": data.d[i].CategoryName })
            };
            $("#ddlCategory").kendoDropDownList({
                dataTextField: "CategoryName",
                dataValueField:"CategoryName",
                dataSource: dataSource,
                change: ChangeWeek
            });
        },
        failure: function (msg) {
            alert(msg);
        }
    });

   $("#ddlProduct").kendoDropDownList();

    function ChangeWeek(e) {
        var ddlddlProduct = $("#ddlProduct");     //appending values..
        //debugger
        var ddlCat = $("#ddlCategory").data("kendoDropDownList");       //passin fiscalmonth value
        var dataItem = ddlCat.text();
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "WebService.asmx/ToFillProductDropDown", //controllerName/MethodName
            data: "{'CategoryName':'" + dataItem + "'}",
            dataType: "json",
            async: false,
            success: function (data) {
                ddlReportWeek.empty();
                var dataSource = [];
                for (i = 0; i < data.d.length; i++) {
                    dataSource.push({ "ProductName": data.d[i].ProductName })
                };
                $("#ddlProduct").kendoDropDownList({
                    dataTextField: "ProductName",
                    dataSource: dataSource,
                    isVisible: true
                });
            },
            failure: function (msg) {
                alert(msg);
            }
        });
    }
    var app = new kendo.mobile.Application();
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    In this case, it’s probably better to use Kendo UI Mobile Form Elements. This will make your interface FEEL like a mobile form which is not the same as a standard web page form. Doing that requires you to use standard select boxes which have enhanced behaviour inside of a Kendo UI Mobile Application as it pertains to the MVVM pattern. You can bind their source, value, events, as well as text and value fields.

    Here is an example using a Kendo UI Mobile form with 2 select lists. The categories select is dependent on the value selected in the products select.

    http://jsbin.com/eyibap/1/edit

    • 0