I am creating a web application where there are several kendo dropdownlists which update their items in concert with each other: ei. each dropdownlist has a change handler which updates the content of the others (kind of like an advanced cascade, but where all the dropdowns have initial values, and selecting one filters the items of all the others).
This is the code for rendering a dropdownlist server side (using the MVC wrappers):
@(Html.Kendo().DropDownListFor(model => model.MakeId)
.OptionLabel("Any")
.DataTextField("Value")
.DataValueField("Key")
.DataSource(source => source.Read(read => read.Action("GetMakes", "Criteria").Data("getCriteria")))
.Events(e => e.Change("criteriaChange"))
)
In the criteriaChange javascript method, I simply "read" the datasources of all the dropdownlists:
function criteriaChange() {
$('#MakeId').data('kendoDropDownList').dataSource.read();
$('#ModelId').data('kendoDropDownList').dataSource.read();
$('#ServiceId').data('kendoDropDownList').dataSource.read();
...
}
On initial page load everyting is ok, the dropdownlists all show "Any", and when I open the lists, the "Any" option is actually selected (surrounded with an orange border).
When I change one of the dropdownlists, the data of all the others is reloaded, and the "Any" option is still shown, but when I open one of the dropdowns, the "Any" option isn't surrounded with the orange border anymore.
This seems like a bug maybe? Or I am missing something? I tried to add a "refresh()" call after the "read()" call, but that doesn't change anything.
This is just a minor estethic problem, but it would be nice if I could find a solution for it.
This is the code for rendering a dropdownlist server side (using the MVC wrappers):
@(Html.Kendo().DropDownListFor(model => model.MakeId)
.OptionLabel("Any")
.DataTextField("Value")
.DataValueField("Key")
.DataSource(source => source.Read(read => read.Action("GetMakes", "Criteria").Data("getCriteria")))
.Events(e => e.Change("criteriaChange"))
)
In the criteriaChange javascript method, I simply "read" the datasources of all the dropdownlists:
function criteriaChange() {
$('#MakeId').data('kendoDropDownList').dataSource.read();
$('#ModelId').data('kendoDropDownList').dataSource.read();
$('#ServiceId').data('kendoDropDownList').dataSource.read();
...
}
On initial page load everyting is ok, the dropdownlists all show "Any", and when I open the lists, the "Any" option is actually selected (surrounded with an orange border).
When I change one of the dropdownlists, the data of all the others is reloaded, and the "Any" option is still shown, but when I open one of the dropdowns, the "Any" option isn't surrounded with the orange border anymore.
This seems like a bug maybe? Or I am missing something? I tried to add a "refresh()" call after the "read()" call, but that doesn't change anything.
This is just a minor estethic problem, but it would be nice if I could find a solution for it.