加载后在剑道多选中添加所选项目答案

【问题标题】：add selected item in kendo Multiselect after load加载后在剑道多选中添加所选项目
【发布时间】：2015-09-24 16:53:03
【问题描述】：

这是参考

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 是空的...加载了多选

何时执行以下代码： $("#products").data("kendoMultiSelect").value([{airline_name:"AA", airport_value:"BB"}]);

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

</body>
</html>

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

现在我不能使用下面的语句来添加选定的项目：

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

MULTISELECT LOAD 时没有数据源。在我的情况下，值尚未加载。以上只是一个例子

【问题讨论】：

标签： asp.net-mvc asp.net-mvc-4 kendo-ui kendo-asp.net-mvc kendo-multiselect

【解决方案1】：

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

如果您想使用文本字段（Chai、Aniseed Syrup...）选择它们，您应该将 json_array 定义为 id 数组（在您的情况下为 ProductID），然后您应该在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]);
  });
});

<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>

【讨论】：

1) 嗨 onaBai，这只是示例代码...我给...在我的代码中，url dosnt 在加载时返回 json 数组...我的场景发生的是 Multiselect 已加载，数据源未定义，因为它是服务器过滤器，但它包含 url（按键返回所需的 json 数组）
2)$("#products").kendoMultiSelect({ placeholder: "选择产品...", dataTextField: "airline_name", dataValueField: "airline_value", autoBind: false, dataSource: { serverFiltering: true, transport: { read: { url: "/**Server url **/", } } } });最初 dataSource 为空 ...执行以下代码时加载多选： $("#products").data("kendoMultiSelect").value([{airline_name:"AA", airport_value:"BB"}]); //上面的statemnt不显示在选定的值中，但在调用value()函数时显示值