KendoUI Grid with custom dropdown column passing whole object instead of Id - angularjs

Question

I am using Kendo UI with Angular/Breeze. I have an editable grid with one column being a drop-down menu. Everything works fine until the save happens. The problem is my odata call is expecting:
Id(guid), Name, Description, CategoryId(guid)
When the drop-down is changed it triggers a save command and sends back like this:
Id(guid), Name, Description, Category(categoryId, Name, Desc)
Where and How do I make the grid send back only the `categoryId instead of the whole category object?
vm.columns = [
{ field: 'name', title: 'name' },
{ field: 'desc', title: 'description' },
{
field: 'categoryId',
title: 'group',
template: getCategory,
editor: categoryDropDown
}
];
function categoryDropDown(container, options) {
$('<input data-text-field="categoryName" data-value-field="categoryId" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataTextField: "categoryName",
dataValueField: "categoryId",
dataSource: vm.categories
});
}
function getCategory(item) {
for (var i = 0, length = vm.category; i < length; i++) {
console.log(vm.categories[i].categoryId);
if (vm.categories[i].categoryId === item.categoryId) {
return vm.categories[i].categoryName;
}
}
return '';
}
Here is the schema for the main datasource:
schema: {
model: {
id: 'Id',
fields: {
categoryName: { editable: true },
categoryDesc: { editable: true },
categoryId: { editable: true }
}
}
}

Answer 1

valuePrimitive was the missing key
function categoryDropDown(container, options) {
$('<input data-text-field="categoryName" data-value-field="categoryId" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataTextField: "categoryName",
dataValueField: "categoryId",
dataSource: vm.categories,
valuePrimitive: true
});
}