1

我正在使用级联组合框来缩小选择范围,比如城市。我的场景与 http: //kendoui.c​​om上提供的示例略有不同,因为我无法在页面加载后进行异步服务器调用。

这是我的代码示例:


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.

有谁知道如何解决这个问题?任何帮助是极大的赞赏!

4

0 回答 0