Kendo Scheduler 多选问题答案

【问题标题】：Kendo Scheduler multiselect issueKendo Scheduler 多选问题
【发布时间】：2015-05-15 15:15:17
【问题描述】：

我们有 Kendo 调度程序，我们在其中声明类别。在事件模型中，我们有categories 字段，它代表字符串数组。在调度器声明中我们也有资源，例如：

resources: [{
  field: "categories",
  dataSource: [{
    text: "",
    value: "red",
    color: "#FF0000"
  }, {
    text: "",
    value: "green",
    color: "#00FF00"
  }, {
    text: "blue",
    value: "blue",
    color: "#0000FF"
  }],
  multiple: true,
  title: "Category"
}],

在调度器编辑模板中我们有

<label for="categories">Categories</label>
<select data-bind="value:categories" name="categories" id="categories" multiple="multiple" data-placeholder="Select categories...">
</select>

在调度器中edit(e)回调

var categ_editor = $("#categories").kendoMultiSelect({
  dataTextField: "value",
  dataValueField: "value",
  itemTemplate: '<div class="k-state-default"  style=\"width:100%; height:16px;\" ><div  style=\"background-color:#:data.color#; width:14px; height:14px;display:inline-block;\" ></div>&nbsp;#: data.value #</div>',
  tagTemplate: '<span class="k-state-default"><b   style=\"background-color:#:data.color#;\" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b>&nbsp;#: data.value #</span>',

  dataSource: {
    data: [{
      text: "",
      value: "red",
      color: "#FF0000"
    }, {
      text: "",
      value: "green",
      color: "#00FF00"
    }, {
      text: "",
      value: "blue",
      color: "#0000FF"
    }]
  }
}).data("kendoMultiSelect");

因此，调度程序显示一切正常，并且正确处理多个值。但是当我编辑类别时，调度程序会像这样发送整个Category 对象（带有text 和color）

"Categories": [{
  "text": "",
  "value": "red",
  "color": "#FF0000"
}, {
  "text": "",
  "value": "green",
  "color": "#00FF00"
}]

但正确的 JSON 必须是 "Categories":["red","green"]"

如何解决此问题？

【问题讨论】：

SO有代码格式吗？
Arman，据我所知，SO 不允许进行代码格式化。例如，您可以使用jsFiddle 或codePen 对其进行格式化。理想情况下，提问者应该做出这样的努力，以便回答者可以轻松理解问题

标签： json kendo-ui telerik kendo-scheduler kendo-multiselect

【解决方案1】：

您的多选数据源包含对象集合，因此您从多选获得的值将以对象的形式出现。这是因为valuePrimitive 属性，默认情况下它设置为false，因此它将返回其数据源内的type 数据，在这种情况下是object，而不是原始值。

你应该把它改成true，让它只返回它的值而不是整个对象。您的多选定义应该是这样的：

var categ_editor = $("#categories").kendoMultiSelect({
  valuePrimitive: true, // this prop you should add
  dataTextField: "value",
  dataValueField: "value",
}).data("kendoMultiSelect");

查看此dojo 了解区别。

【讨论】：

有效！谢谢，朋友！我在这个问题上浪费了一个星期。