1

Kendo Grid があり、そのDataBoundイベントで、そのデータ ソースを Kendo MultiSelect に追加したいと考えています。したがって、グリッドからのデータがロードされると、以下の関数が起動されます。

これは私がこれまでに試したことですが、成功していませんが、コードから私が意図していることがわかります:

function addToMultiSelect() {
    var multiSelect = $("#multiSelect").data("kendoMultiSelect");
    var grid = $("#grid").data("kendoGrid");
    var places = grid.dataSource._data;

    for (var i = 0; i < places.length; i++) {
        var row = instPlaces[i];

        var id = row.Id;
        var mediumDescription = row.MediumDescription;
        alert(id + " - " + mediumDescription);

        multiSelect.dataSource.insert(i, { text: mediumDescription, value: id })
    }
    multiSelect.dataSource.read();
}

アラートには、データグリッドのすべての項目の ID と説明が適切に表示されるので、グリッドからデータを正しく取得できます。

それらを multiSelect のデータソースに追加します。最後の行はそれを更新して新しいデータを表示することですが、そうではありません。multiSelect は空のままです。

4

1 に答える 1

4

次のことを試してください。

function addToMultiSelect() {
    var multiSelect = $("#multiSelect").data("kendoMultiSelect");
    var grid = $("#grid").data("kendoGrid");
    var places = grid.dataSource.data();

    // Read original data content
    var multiData = multiSelect.dataSource.data();
    for (var i = 0; i < places.length; i++) {
        ...
        // insert new element into copy of multiselect data
        multiData.push({ text: mediumDescription, value: id })
    }
    // Write back the modified data
    multiSelect.dataSource.data(multiData);
}

次のコード例を参照してください。

$(document).ready(function() {
  function addToMultiSelect(e) {
    var grid = this;
    var data = this.dataSource.data();

    var multiData = [];
    for (var i = 0; i < data.length; i++) {
      multiData.push({ text: data[i].ShipName, value: i });
    }
    multi.dataSource.data(multiData);
  }

  var multi = $("#multi").kendoMultiSelect({
    dataSource:  {
      data: [
        { text: "ship 1", value: 1 },
        { text: "ship 2", value: 2 },
        { text: "ship 3", value: 3 },
        { text: "ship 4", value: 4 }
      ]
    },
    dataTextField: "text",
    dataValueField: "value"
  }).data("kendoMultiSelect");

  $("#grid").kendoGrid({
    dataSource: {
      type: "odata",
      transport: {
        read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
      },
      schema: {
        model: {
          fields: {
            OrderID: { type: "number" },
            Freight: { type: "number" },
            ShipName: { type: "string" },
            OrderDate: { type: "date" },
            ShipCity: { type: "string" }
          }
        }
      },
      pageSize: 20,
      serverPaging: true,
      serverFiltering: true,
      serverSorting: true
    },
    dataBound: addToMultiSelect,
    height: 550,
    columns: [
      "OrderID",
      "Freight",
      {
        field: "OrderDate",
        title: "Order Date",
        format: "{0:MM/dd/yyyy}"
      },
      {
        field: "ShipName",
        title: "Ship Name"
      }, 
      {
        field: "ShipCity",
        title: "Ship City"
      }
    ]
  });
});
html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />

<script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>

Ship Names copied from Grid DataSource: <input id="multi"/>
Grid
<div id="grid"></div>

于 2015-01-21T12:12:10.247 に答える