Cascading DropDownLists

[Cyndie]

I'm attempting to create a series of cascading dropdowns by populating the second one from the first, the third from the second and so on, by using the change function.  This works fine the first time a selection is made in each of the DropDownLists, but if I change a selection in the first one after the second DropDownList has been populated, the second DropDownList disappears to never return.  Is there a way to accomplish this?

$("#algType").kendoDropDownList({

    change: function () {

        algType = $("#algType").data("kendoDropDownList").value();

        $("#substn").kendoDropDownList({

            dataTextField: "Substn",

            dataValueField: "SubstnID",

            dataSource: substnDataSource,

            change: function () {

                algType = $("#algType").data("kendoDropDownList").value();

                substn = $("#substn").data("kendoDropDownList").value();

                $("#devtyp").kendoDropDownList({

                    dataTextField: "Devtyp",

                    dataValueField: "DevtypID",

                    dataSource: devtypDataSource

                });

            }

        });

    }

});

[Georgi Krustev]

Hello,

 
I will suggest you check this jsFiddle demo, which shows how to implement cascading dropdownlists.

Kind regards,
Georgi Krustev
the Telerik team

[Cyndie]

Thank you very much.  That helps a lot.

[Mangesh]

Hi,

Filtering is not working after using cascading kendodropdownlist:

Here is my code:-

    $(document).ready(function () {
        var StatedataSource = new kendo.data.DataSource({
            type: "json",
            transport: {
                read: {
                    type: "POST",
                    url: "GetDocumentType.asmx/GetStateList",
                    contentType: 'application/json; charset=utf-8',
                    datatype: "json"
                },
                parameterMap: function (options) {
                    return JSON.stringify(options);
                }
            },
            serverFiltering: true,
            schema: {
                data: "d",
                total: function (result) {
                    result = result.d || result;
                    return result.length;
                }
            }
        });


        $("#states").kendoDropDownList({
            autoBind: false,
            dataTextField: "StateName",
            dataValueField: "StateID",
            dataSource: StatedataSource
        });

        $("#countries").kendoDropDownList({
            dataTextField: "CountryName",
            dataValueField: "CountryID",
            dataSource: {
                type: "json",
                serverFiltering: true,
                transport: {
                    read: {
                        type: "POST",
                        url: "GetDocumentType.asmx/GetCountryList",
                        contentType: 'application/json; charset=utf-8',
                        datatype: "json"
                    },
                    parameterMap: function (options) {
                        return JSON.stringify(options);
                    }
                },
                schema: {
                    data: "d",
                    total: function (result) {
                        result = result.d || result;
                        return result.length;
                    }
                }
            },
            change: function () {
                StatedataSource.filter({
                    field: "CID",
                    operator: "equals",
                    value: parseInt(this.value())
                });
            }
        });
    });

What is the issue of it?

Regards,
Mangesh

[Mangesh]

Please help need to do this asap...