1

ここに参照があります

Kendo UI MultiSelect ウィジェットでのサーバー フィルタリングの例

今問題は、選択したアイテムをロード後に追加したいということです。データ ソースはリモートなので (オートコンプリートのように機能します)、直接アタッチできません

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/multiselect/serverfiltering">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.902/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.902/styles/kendo.material.min.css" />

    <script src="//kendo.cdn.telerik.com/2015.2.902/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2015.2.902/js/kendo.all.min.js"></script>
</head>
<body>

<div id="example" >
    <div class="demo-section k-header">
        <h4>Products</h4>
        <select id="products"></select>
    </div>
    <script>
        $(document).ready(function() {
           $("#products").kendoMultiSelect({
placeholder: "Select products...",
dataTextField: "airline_name",
dataValueField: "airline_value",
autoBind: false,
dataSource: {
  serverFiltering: true,
  transport: {
    read: {
      url: "/**Server url **/",
    }
  }
}
});

最初は dataSource は空です ... Multiselect がロードされます

$("#products").data("kendoMultiSelect").value([{airline_name:"AA",airline_value:"BB"}]);

// 上記のステートメントは、選択した値には表示されませんが、value() 関数を呼び出すと値が表示されます }); 

</body>
</html>

THE URLはJSON配列を取得し、コントローラーに送信される文字を入力し、コントローラーが要求された一致する値をJSON配列で送信するときのように機能します。

現在、以下のステートメントを使用して選択したアイテムを追加することはできません:

$("#products").data("kendoMultiSelect").values(json_array) //doesnt work

MULTISELECT LOAD にデータソースがありません。私の場合、値はすでにロードされていません。上記はほんの一例です

4

1 に答える 1

0

次のコード スニペットでは、サンプルの動作を確認できます。基本的に、DataSource の 2 つの要素を選択するボタン付きのコードです。

テキストフィールド ( 、...を使用して ID を選択するjson_array場合は、ID の配列として (あなたの場合は) として定義する必要があります。その場合、isと notを定義する必要があります。ProductIDChaiAniseed SyrupkendoMultiSelectdataValueFieldProductNameProductId

$(document).ready(function() {
  $("#products").kendoMultiSelect({
    placeholder: "Select products...",
    dataTextField: "ProductName",
    dataValueField: "ProductID",
    autoBind: false,
    dataSource: {
      type: "odata",
      serverFiltering: true,
      transport: {
        read: {
          url: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",
        }
      }
    }
  });

  $("#sel").on("click", function() {
    $("#products").data("kendoMultiSelect").value([3, 1]);
  });
});
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.902/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.902/styles/kendo.material.min.css" />

<script src="//kendo.cdn.telerik.com/2015.2.902/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2015.2.902/js/kendo.all.min.js"></script>

<button id="sel" class="k-button">Select Chai &amp; Aniseed</button>
<h4>Products</h4>
<select id="products"></select>

于 2015-09-25T00:01:11.120 に答える