KendoDropDownList - 1つのドロップから別のドロップまでのカスケードデータ

Question

私はゲームを作っており、プレイヤーがプレイ可能なキャラクターレースを選んだ特定の要件を持っています。そして、そのための利用可能な性別のリストレース。 kendo.ui.DropDownListOptionsのCascadeプロパティを使用してこれを行うのは簡単だと思いました...このようにしてください。

var racesOptions = { 
     index: -1, 
     valuePrimitive: true, 
     dataTextField: "Name", 
     dataValueField: "Name", 
     dataSource: { 
      transport: { 
       read: { 
        dataType: 'json', 
        url: '/api/races/list', 
        type: 'GET' 
       } 
      } 
     } 
}; 

var genderOptions = { 
    index: -1, 
    valuePrimitive: true, 
    cascadeFrom: 'race', 
    cascadeFromField: 'Genders' 
}; 

/api/races/listからのデータの形は次のようになります。

[{ 
    "Name": "race1", 
    // ... other data ... // 
    "Genders": [ "Male", "Female", "Other" ] 
}, { 
    "Name": "race2", 
    // ... other data ... // 
    "Genders" : ["Female"] 
}, { 
    "Name": "race3", 
    // ... other data ... // 
    "Genders": ["Male"] 
}] 

私はこれが思いもよらないと思っていました。 2番目のドロップダウンは最初のカスケードからカスケードします。最初に値があるとき、私はCascadeFromFieldの値を得ると考えました。しかし、それは起こっていません...実際には、これを達成するための唯一の方法は、#raceウィジェットのchangeイベントの次のコードです。

change: function (e) { 
    // the specific race entity selected 
    var entity = e.sender.dataItem().toJSON(); 
    // set the selected race's genders 
    var genders = $('#genders').data('kendoDropDownList'); 
    genders.destroy(); 
    genders = $('#genders').kendoDropDownList({ 
     index: -1, 
     valuePrimitive: true, 
     dataSource: { 
      data: entity.Genders 
     } 
    }).data('kendoDropDownList'); 
    genders.select(-1); 
    genders.trigger('change'); 
} 

この変更イベントは機能しますが、厄介で鈍いです。私が期待しているようにカスケーディングを動作させる別の方法はありますか？

Answer 1

cascadeFromField:の値は、親IDフィールドを指す必要があります。あなたの場合、RacesデータソースのIDフィールド。

ここには役立つ小さな例があります。

<h4>Race:</h4> 
<input id="race" /> 

<h4>Gender:</h4> 
<input id="gender" /> 

<script> 
    $("#race").kendoDropDownList({ 
     optionLabel: "Select race...", 
     dataTextField: "raceName", 
     dataValueField: "raceID", 
     dataSource: [ 
      { raceName: "Race1", raceID: 1 }, 
      { raceName: "Race2", raceID: 2 }, 
      { raceName: "Race3", raceID: 3 } 
     ] 
    }); 

    $("#gender").kendoDropDownList({ 
     optionLabel: "Select gender...", 
     cascadeFrom: "race", 
     cascadeFromField: "raceID", 
     dataTextField: "genderName", 
     dataValueField: "genderID", 
     dataSource: [ 
      { genderName: "Male", genderID: 1, raceID: 1 }, 
      { genderName: "Female", genderID: 2, raceID: 1 }, 
      { genderName: "Other", genderID: 3, raceID: 1 }, 
      { genderName: "Female", genderID: 4, raceID: 2 }, 
      { genderName: "Male", genderID: 4, raceID: 3 } 
     ] 
    }); 
</script> 

上記demoは、上記のコードを使用して確認できます。