I’m using telerik.kendoui.professional.2014.1.416.commercial, it seems cascading comboboxes with pre-set the selected items don’t work correct with local data sources or I don’t configure them correct.
I modified the script section of the http://demos.telerik.com/kendo-ui/web/combobox/cascadingcombobox.html example to the following code:
$(document).ready(
function
() {
var
categories = $(
"#categories"
).kendoComboBox({
filter:
"contains"
,
placeholder:
"Select category..."
,
dataTextField:
"CategoryName"
,
dataValueField:
"CategoryID"
,
dataSource: { data: [{
"CategoryName"
:
"Condiments"
,
"CategoryID"
: 2}] },
value: 2
}).data(
"kendoComboBox"
);
var
products = $(
"#products"
).kendoComboBox({
autoBind:
false
,
cascadeFrom:
"categories"
,
filter:
"contains"
,
placeholder:
"Select product..."
,
dataTextField:
"ProductName"
,
dataValueField:
"ProductID"
,
dataSource: { data: [{
"ProductName"
:
"Chef Anton's Gumbo Mix"
,
"ProductID"
: 5,
"CategoryID"
: 2}, {
"ProductName"
:
"Aniseed Syrup"
,
"ProductID"
: 3,
"CategoryID"
: 2}] },
value: 5
}).data(
"kendoComboBox"
);
var
orders = $(
"#orders"
).kendoComboBox({
autoBind:
false
,
cascadeFrom:
"products"
,
filter:
"contains"
,
placeholder:
"Select order..."
,
dataTextField:
"ShipCity"
,
dataValueField:
"OrderID"
,
dataSource: { data: [{
"ShipCity"
:
"Graz"
,
"OrderID"
: 10382,
"ProductID"
: 5}, {
"ShipCity"
:
"London"
,
"OrderID"
: 10289,
"ProductID"
: 5}] },
value: 10382
}).data(
"kendoComboBox"
);
$(
"#get"
).click(
function
() {
var
categoryInfo =
"\nCategory: { id: "
+ categories.value() +
", name: "
+ categories.text() +
" }"
,
productInfo =
"\nProduct: { id: "
+ products.value() +
", name: "
+ products.text() +
" }"
,
orderInfo =
"\nOrder: { id: "
+ orders.value() +
", name: "
+ orders.text() +
" }"
;
alert(
"Order details:\n"
+ categoryInfo + productInfo + orderInfo);
});
});
In result the first cascading combobox # products loads its filtered options and preset its selected item, but the second cascading combobox #orders stays disabled same as its parent (#products) does not have a value.
Here is what I found in the kendoui.web code, the brief execution flow is:
1. #categories combobox init executes, initially it sets selectedIndex to -1, but due to options.autoBind is true it runs _filterSource method, it leads to firing of the datasource change event, that causes the combobox refresh and due to it has value, the matched item being selected (selectedIndex is not -1).
2. #products combobox init executes. It runs _cascade method, it updates the autoBind property to false, the parent (#categories) datasoure is set and it has a selected item (i.e. parent's data item is defined), so it leads to selection of matching #products item (selectedIndex is not equal to -1). Immediately after _cascade execution _init method overrides selectedIndex back to -1 (but does not clear selection) and due to the autoBind option has been set to false, the _init doesn’t call _filterSource method, i.e. in result the #products has selected item, but its selectedIndex property is not synchronized.
3. #orders combobox init executes. It runs _cascade method, but its parent data item cannot be get, due to parent’s selectedIndex is equal to -1. That leads #order combobox to stay disabled.
I found a solution modifying the read methos of combobox datasource transport objects using some timeout:
$(document).ready(
function
() {
var
categories = $(
"#categories"
).kendoComboBox({
filter:
"contains"
,
placeholder:
"Select category..."
,
dataTextField:
"CategoryName"
,
dataValueField:
"CategoryID"
,
dataSource: {
type:
"json"
,
serverFiltering:
true
,
transport: {
read:
function
(options) {
var
_data = [{
"CategoryName"
:
"Condiments"
,
"CategoryID"
: 2}];
setTimeout(
function
() { options.success(_data); }, 100);
}
}
},
value: 2
}).data(
"kendoComboBox"
);
var
products = $(
"#products"
).kendoComboBox({
autoBind:
false
,
cascadeFrom:
"categories"
,
filter:
"contains"
,
placeholder:
"Select product..."
,
dataTextField:
"ProductName"
,
dataValueField:
"ProductID"
,
dataSource: {
type:
"json"
,
serverFiltering:
true
,
transport: {
read:
function
(options) {
var
_data = [{
"ProductName"
:
"Chef Anton's Gumbo Mix"
,
"ProductID"
: 5,
"CategoryID"
: 2}, {
"ProductName"
:
"Aniseed Syrup"
,
"ProductID"
: 3,
"CategoryID"
: 2}];
setTimeout(
function
() { options.success(_data); }, 100);
}
}
},
value: 5
}).data(
"kendoComboBox"
);
var
orders = $(
"#orders"
).kendoComboBox({
autoBind:
false
,
cascadeFrom:
"products"
,
filter:
"contains"
,
placeholder:
"Select order..."
,
dataTextField:
"ShipCity"
,
dataValueField:
"OrderID"
,
dataSource: {
type:
"json"
,
serverFiltering:
true
,
transport: {
read:
function
(options) {
var
_data = [{
"ShipCity"
:
"Graz"
,
"OrderID"
: 10382,
"ProductID"
: 5}, {
"ShipCity"
:
"London"
,
"OrderID"
: 10289,
"ProductID"
: 5}];
setTimeout(
function
() { options.success(_data); }, 100);
}
}
},
value: 10382
}).data(
"kendoComboBox"
);
$(
"#get"
).click(
function
() {
var
categoryInfo =
"\nCategory: { id: "
+ categories.value() +
", name: "
+ categories.text() +
" }"
,
productInfo =
"\nProduct: { id: "
+ products.value() +
", name: "
+ products.text() +
" }"
,
orderInfo =
"\nOrder: { id: "
+ orders.value() +
", name: "
+ orders.text() +
" }"
;
alert(
"Order details:\n"
+ categoryInfo + productInfo + orderInfo);
});
});
Could you recommend me another approach to solve that problem or advice me how properly to configure the cascading comboboxes to work with local data?
Thanks