Data source changes

[Dennis]

Ok, so here is what I'm trying to do, I have 2 dropdowns, one for countries, the other for cities. They both pull their data from  remote json data sources. The thing is that when you chose a country it has to filter out the cities only for that country. The only way I figured I could do this is by changing the data source of the city drop down once the value of the country drop down changes.

I wrote some code for that but it doesnt work, here's a snippet:

             <li>

                @Html.LabelFor(m => m.Country)

                @(Html.Kendo().DropDownListFor(m => m.Country)

                   

                  .DataTextField("Name")

                  .DataValueField("CountryID")                

                  .DataSource(source =>

                  {

                    source.Read(read =>

                    {

                        read.Url("/WebUI/API/Countries/");

 

                     });

                   })

                    .Events(e => e.Change("CountryChange"))

                  ) 

            </li>

            <li>

                @Html.LabelFor(m => m.City)

           @(Html.Kendo().DropDownListFor(m => m.City)

                  .DataTextField("Name")

                  .DataValueField("CityID")

                  .DataSource(source =>

                      {

                          source.Read(read =>

                              {

                                 

                                  read.Url("/WebUI/API/Cities");                         

                              });         

                      })

                    )

            </li>

 

<script type="text/javascript">

   

    function CountryChange() {

            $("#City").data("kendoDropDownList").dataSource = new kendo.data.DataSource({

            transport: {

                 read: {

                        url:"/WebUI/API/Countries/3/Cities"}},

               schema: {

                        data:"",

                        total:"",

                        errors:"Errors"}}

        );

 

                $("#City").data("kendoDropDownList").dataSource.read();

                $("#City").data("kendoDropDownList").refresh();

 

                alert($("#City").data("kendoDropDownList").dataSource.total());

         

    }

 

     

</script>

So as you can see I assign the City drop down a new data source, for the testI don't actually dinamicly get the countryID from the country dropdown. Will implement that after I get something to work actually. After this event fires the dropdown doesnt respond to clicks anymore, and i put a alert at the end to show my a total of the items in the dataSource it just gives me a 0.

I tracked the network data via the debugger in my browser and I see that a call to /WebUI/API/Countries/3/Cities is being made when the event fires and it's succesfull and gets back the data it needs. I just don't get it what I'm doing wrong. 



Thanks In advance!
Dennis P.