我正在使用级联组合框来缩小选择范围,比如城市。我的场景与 http: //kendoui.com上提供的示例略有不同,因为我无法在页面加载后进行异步服务器调用。
这是我的代码示例:
HTML
<p>
<label for="Country">Country:</label>
<input id="country"/>
</p>
<p>
<label for="City">City:</label>
<input id="city" disabled="disabled" />
</p>
脚本(为简单起见,内联添加数据源)
$("#country").kendoComboBox({
placeholder: "Select a country...",
dataTextField: "CountryName",
dataValueField: "CountryID",
dataSource: new kendo.data.DataSource({
data: [
{
CountryID: "1",
CountryName: "Sweden"
},
{
CountryID: "2",
CountryName: "Spain"
}]
}),
});
$("#city").kendoComboBox({
autoBind: false,
cascadeFrom: "country",
placeholder: "Select city...",
dataTextField: "CityName",
dataValueField: "CountryID",
dataSource: new kendo.data.DataSource({
data: [
{
CountryID: "1",
CityID: "1",
CityName: "Stockholm"
},
{
CountryID: "1",
CityID: "2",
CityName: "Gothenburg"
},
{
CountryID: "1",
CityID: "3",
CityName: "Malmo"
},
{
CountryID: "2",
CityID: "4",
CityName: "Madrid"
}]
}),
})
这确实有效,在第一个列表中选择“瑞典”将在第二个框中生成斯德哥尔摩、哥德堡和马尔默。但是要求对孩子和父母使用相同的 dataValueField,因此当我选择一个城市时,所选值将是 CountryID 而不是我想要的 CityID。
正确的方法(我猜)应该是在#city 中使用 dataValueField: CityID 并进行客户端选择/过滤,类似于:(注意,伪代码)
SELECT CityID, CityName WHERE CountryID EQUALS country.dataValue
That would fetch the right dataValue (CityID) from the city combobox when a city is selected.
有谁知道如何解决这个问题?任何帮助是极大的赞赏!