Data source changes

1 posts, 0 answers
  1. Dennis
    Dennis avatar
    30 posts
    Member since:
    Aug 2012

    Posted 27 Jun 2012 Link to this post

    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. 
  2.
Back to Top