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"
            }]
    }),
})

最初のリストで「スウェーデン」を選択すると、2 番目のボックスにストックホルム、ヨーテボリ、マルメが生成されます。ただし、子と親の両方に同じ dataValueField を使用する必要があるため、都市を選択すると、選択した値は必要な CityID ではなく CountryID になります。

それを行う正しい方法 (推測) は、 #city で dataValueField: CityID を使用し、次のようなクライアント側の選択/フィルタリングを行うことです: (注、疑似コード)

SELECT CityID, CityName WHERE CountryID EQUALS country.dataValue

これにより、都市が選択されたときに都市コンボボックスから正しい dataValue (CityID) が取得されます。

これを解決する方法を知っている人はいますか？どんな助けでも大歓迎です！

4

0 に答える 0