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:
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.
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.