4

ここに表示される非常に簡単なケース: http://jsbin.com/ahoYoPi/3/edit

親の値フィールドに対してフィルター処理 (eq) する子の内部フィールドが「category_id」であることを指定する必要があります... もちろん、Kendo のドキュメントには、その方法については何も記載されていません... または、それは非常に優れたものですか?説明するに値しないのは明らかですか?

    var categoriesList = new Array (
    {"id":"1","categoryName":"Fruits"},
    {"id":"2","categoryName":"Vegetables"} );

var productsList = new Array(
    {"id":"1","categorie_id":"1","productName":"Apples"},
    {"id":"2","categorie_id":"1","productName":"Oranges"},
    {"id":"3","categorie_id":"2","productName":"Carottes"},
    {"id":"4","categorie_id":"2","productName":"Patatoes"});

$("#categories").kendoDropDownList({
    dataTextField: "categoryName",
    dataValueField: "id",
    dataSource: categoriesList,
    optionLabel: "----------------" ,
    change: function() {
        $("#products").data("kendoDropDownList").value(0);
    }
});
$("#products").kendoDropDownList({
    cascadeFrom: "categories",
    dataTextField: "productName",
    dataValueField: "id",
    dataSource: productsList,
    optionLabel: "----------------" ,
});
4

1 に答える 1

4

カスケードに関するドキュメントは、http://docs.kendoui.c​​om/getting-started/web/combobox/cascading から入手できます

フィルタリングの仕組みは次のとおりです。

親に値がある場合、子は有効になり、それに応じてデータをフィルタリングします。フィルタ オプションは次のようになります。 field: "parentID", //the dataValueField of the parent operator: "eq", value: "" //parent's value

これは、子ドロップダウンリスト (コンボボックス) がdataValueField、親によって構成されたフィールドを使用してフィルタリング (カスケード) を行うことを意味します。dataValueFieldあなたの場合、親が「id」に設定されているため、これは機能しません。ただし、このフィールドはproductsList配列内で別の目的を果たします。

現在、カスケードに使用するフィールドを指定できる機能はありません。

次の 2 つのオプションがあります。

  1. @OnaBaiが提案したことを行います。の「id」フィールドの名前categoriesListを「categorie_id」に変更し、dataValueFieldそれに応じて設定します。
  2. カスケードを手動で実装します。最初に cascadeFrom オプションを削除してから、親の変更イベントでこれを行います。

    change: function() {
        var products = $("#products").data("kendoDropDownList");
    
        products.dataSource.filter( {
          field: "categorie_id",
          value: this.value(),
          operator: "eq"
        });
    
        products.value(0);
    }
    

    これがライブデモです: http://jsbin.com/ogEj/1/edit

于 2013-08-21T12:27:32.423 に答える