Question

这是参考资料

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

何时执行以下代码： $（＆＃34; #products＆＃34;）。data（＆＃34; kendoMultiSelect＆＃34;）。value（[{airline_name：＆＃34; AA＆＃34;，airline_value：＆＃34; BB＆＃34; }]）;

//上面的statemnt不显示在选定的值中，但在调用value（）函数时显示值 }）;

</body>
</html>

URL获取JSON数组，它就像我输入发送到控制器的字母和控制器在JSON数组中发送请求的匹配值一样。

现在我无法使用以下语句添加所选项目：

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

在MULTISELECT LOAD没有DATASOURCE。在我的情况下，VALUES尚未加载。以上只是一个例子

Answer 1

在以下代码段中，您可以看到您的示例正常运行。它基本上是带有按钮的代码，用于选择DataSource的两个元素。

如果要使用文本字段json_array {{1}选择它们，您应该将ProductID定义为ID数组（在您的情况下为Chai）那么你应该在Aniseed Syrup中定义kendoMultiSelect是dataValueField而不是ProductName。

ProductId

$(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]);
  });
});

加载后在kendo Multiselect中添加所选项目

1 个答案: