This is a migrated thread and some comments may be shown as answers.

Cascading Drop Down - Multiple Data Sources

3 Answers 178 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Greg
Top achievements
Rank 1
Greg asked on 29 Mar 2012, 11:21 PM
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);
        }
    });

3 Answers, 1 is accepted

Sort by
0
Patt
Top achievements
Rank 1
answered on 02 Aug 2012, 05:29 PM
Maybe the 2nd one need to have property    cascadeFrom: "states" ?
0
Thomas
Top achievements
Rank 1
answered on 30 Aug 2012, 06:03 PM
Did you resolve this, I have same issue
0
Karel
Top achievements
Rank 1
answered on 08 Oct 2012, 11:22 PM
Same issue
Tags
DropDownList
Asked by
Greg
Top achievements
Rank 1
Answers by
Patt
Top achievements
Rank 1
Thomas
Top achievements
Rank 1
Karel
Top achievements
Rank 1
Share this question
or