KendoUI grid with custom dropdown column passing whole object instead of Id
I am using Kendo frontend with Angular / Breeze. I have an editable grid with one column being a dropdown. Everything works fine until rescue occurs. The problem is that my otat call expects:
Id (guid), Name, Description, CategoryId (guid)
When the dropdown changes, it runs the save command and is sent back like this:
Id (guid), Name, Description, Category (categoryId, Name, Desc)
Where and how to make a grid to send 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 data source:
schema: {
model: {
id: 'Id',
fields: {
categoryName: { editable: true },
categoryDesc: { editable: true },
categoryId: { editable: true }
}
}
}
+3
source to share
1 answer
valuePrimitive was a 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
});
}
+6
source to share