Kendo Scheduler multiselect issue

Question

We have Kendo scheduler, where we declaring categories. In event model we have categories field, which represents string array. In scheduler declaration we also have resources, such as this:

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

In scheduler editing template we have

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

and in scheduler edit(e) callback

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");

So, scheduler showing all good, and handle multiple values correct. But when I'm editing categories, scheduler sends whole Category object (with text and color) like this

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

but correct JSON must be "Categories":["red","green"]"

How to fix this behavior?

Answer 1

Your multiselect data source contains collection of objects, therefore the value you get from multiselect will be in form of object. This is because valuePrimitive property, by default it is set to false so it will return type of data inside its data source which in this case is object instead of primitive value.

You should change it to true, to make it return just its value not the whole object. Your multiselect definition should be like this:

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

See this dojo to know the difference.