Kendo 调度程序多选问题

Question

我们有 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"]"

如何解决此问题？

Answer 1

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

您应该将其更改为 true，使其 return 只是它的值而不是整个对象。您的多选定义应该是这样的：

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

看到这个 dojo 了解其中的区别。

Kendo 调度程序多选问题

Kendo Scheduler multiselect issue

json

telerik

kendo-ui

kendo-scheduler

kendo-multiselect