1

既存のデータ ファイルを使用して剣道のドロップ ダウン リストに入力しようとしています。ドロップ ダウン リストに入力することに関心があるフィールドは、基本的にリストまたは自動車メーカーを表示する「make」フィールドです。

これはうまくいきます...

var makes = $("#makes").kendoDropDownList({
        optionLabel: "Select make...",
        dataTextField: "make",
        dataValueField: "make",
        dataSource: {
            transport: {
                read: {
                    dataType: "jsonp",
                    url: "data.php",
                }
            },
            schema: {
                data: "data"
            }
        }
    }).data("kendoDropDownList");

ただし、車のスペックのリストとして繰り返される多くのメイクがあるため、メイクごとにデータをグループ化して繰り返しを非表示にしたいと考えています。この行を追加するとすぐに、ドロップダウンリストのオプションが未定義になります。

 group: { field: "make" }

グループを追加した後のコード

 var makes = $("#makes").kendoDropDownList({
        optionLabel: "Select make...",
        dataTextField: "make",
        dataValueField: "make",
        dataSource: {
            transport: {
                read: {
                    dataType: "jsonp",
                    url: "data.php",
                }
            },
            schema: {
                data: "data"
            },
            group: { field: "make" }
        }
    }).data("kendoDropDownList");

どんなアイデアの人も

ありがとう

アップデート!!

以下でこれを使用すると、データをグループ化できますが、カスケードは機能しません

var data = [
  {"make": "Audi", "model": "A1"},
  {"make": "Audi", "model": "A2"},
  {"make": "Audi", "model": "A3"},
  {"make": "Audi", "model": "A4"},
  {"make": "Saab", "model": "S500"}
];

$(document).ready(function () {

  var makesDatasource = new kendo.data.DataSource({
      data: data,
      group: { field: "make", value: "make"}
  });

  var makes = $("#makes").kendoDropDownList({
        optionLabel: "Select make...",
        dataTextField: "value",
        dataValueField: "value",
        dataSource: makesDatasource
  }).data("kendoDropDownList");

  var modelsDatasource = new kendo.data.DataSource({
      data: data,
      group: { field: "model", value: "model"}
  });

  var models = $("#models").kendoDropDownList({
        autoBind: false,
        cascadeFrom: "makes",
        optionLabel: "Select model...",
        dataTextField: "value",
        dataValueField: "value",
        dataSource: modelsDatasource
  }).data("kendoDropDownList");

});
4

1 に答える 1