Cascading Drop Down - Multiple Data Sources

[Greg]

Hey,

Sorry for another dropdown post that seems so much like the others, but I have spent hours trying to get this to work and for some reason it won't. All I am trying to do is have a dropdown for State and City. On open the State list will be retrieved. Then when a State is selected, the City list will be retrieved. 

What I am seeing:
When I select the State, the City request will be made, it returns, and the City data source IS populated. But when I click on the City drop down list, it is not responsive. I try and click on it, but it doesn't respond at all!

I've been screwing around with the code so much that I'm probably missing something, but any help at all would be greatly appreciated.

I also just downloaded the newest Kendo code.
Kendo: 2012.1.322
jquery-1.7.1.min.js
Chrome: 17.0.963.83

var dsStates,

        dsCities

        ;

 

    $("#app").show();

 

    getStates();

     

    // wire up list view to available dbconn objects

    function getStates() {

        dsStates = new kendo.data.DataSource({

            transport: {

                read: {

                    url: "/infoburst/rest/exec/xdcqry/165?q=States",

                    data: {

                        json: "true"

                    },

                    beforeSend: function(req) {

                        // use IBE SessionManager "auth"

                        req.setRequestHeader('Authorization', sm.auth());

                    }

                }

            },

            error: function(e) {

                log("getStates error : " + e);

            }

        });

        dsStates.read();

    }

 

    function getCities(state) {

        dsCities = new kendo.data.DataSource({

            transport: {

                read: {

                    url: "/infoburst/rest/exec/xdcqry/165?q=Cities&State=" + "Arizona",//state,

                    data: {

                        json: "true"

                    },

                    beforeSend: function(req) {

                        // use IBE SessionManager "auth"

                        req.setRequestHeader('Authorization', sm.auth());

                    }

                }

            },

            change: function(e) {

                log("get cities info OK");

            },

            error: function(e) {

                log("getCities error : " + e);

            }

        });

        dsCities.read();

    }

 

    $("#states").kendoDropDownList({

        optionLabel: "Select State...",

        dataTextField: "State",

        dataValueField: "State",

        dataSource: dsStates,

        change: function() {

            var value = this.value();

 

            if (value) {

                getCities(value);

                $("#cities").data("kendoDropDownList").enable();

            } else {

                $("#cities").data("kendoDropDownList").enable(false);

            }

        }

    });

 

     $("#cities").kendoDropDownList({

        autoBind: false,

        optionLabel: "Select City...",

        dataTextField: "City",

        dataValueField: "City",

        dataSource: dsCities,

        change: function() {

            var value = this.value();

        },

        error: function(e) {

            log("getCities error : " + e);

        }

    });

[Patt]

Maybe the 2nd one need to have property    cascadeFrom: "states" ?

[Thomas]

Did you resolve this, I have same issue

[Karel]

Same issue