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

Data source changes

0 Answers 166 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Dennis
Top achievements
Rank 1
Dennis asked on 27 Jun 2012, 08:45 PM
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. 

No answers yet. Maybe you can help?

Tags
DropDownList
Asked by
Dennis
Top achievements
Rank 1
Share this question
or