I'm having an odd problem with my KendoUI grid using Odata-V4. I have a foreign key lookup, and if I have a value in the lookup field, I can update it just fine- I get an indicator that the field is dirty and it's updated when I save the grid. However, if there is no value when I load the item, I can choose an item in the dropdown but the selection isn't saved- the grid shows a blank value when I focus away from the foreign key dropdown and I can't save the grid; if I change another value and save it, the FK dropdown didn't set the value in the object. I'm hoping someone's run into this before? Thanks so much for any input.
var dataSource = new kendo.data.DataSource({
type: "odata-v4",
transport: {
read: {
xhrFields: { withCredentials: true },
url: "/odata/ProvisionalAppointments"
},
update: {
xhrFields: { withCredentials: true },
url: function (data) {
return "/odata/ProvisionalAppointments(" + data.Id + ")";
}
}
},
schema: {
model: {
id: "Id",
fields: {
Id: {type: "number" },
CustomerFirstName: { type: "string", editable: false },
CustomerLastName: { type: "string", editable: false },
CustomerPhoneNumber: { type: "string", editable: false },
FromDate: { type: "date", editable: false },
ToDate: { type: "date", editable: false },
ServiceId: { type: "number" },
LocationId: { type: "number" },
EmployeeId: { type: "number" },
IsApproved: { type: "bool" }
}
}
},
pageSize: 5,
serverPaging: true,
serverFiltering: true,
serverSorting: true
});
var servicesDataSource = new kendo.data.DataSource({
type: "odata-v4",
transport: {
read: {
xhrFields: { withCredentials: true },
url: "/odata/Services"
}
},
schema: {
model:
{
id: "Id",
fields:
{
Id: {
editable: false
},
Name: {
type: "string"
}
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true
});
$("#grid").kendoGrid({
dataSource: dataSource,
toolbar: ["save", "cancel", "excel", "pdf"],
excel: {
allPages: true,
filterable: true
},
pdf: {
allPages: true
},
sortable: { mode: "multiple" },
pageable: {
pageSizes: [5, 10, 20, 50]
},
editable: true,
reordable: true,
resizable: true,
columns: [
{ field: "CustomerFirstName", title: "First Name" },
{ field: "CustomerLastName", title: "Last Name" },
{ field: "CustomerPhoneNumber", title: "Phone" },
{ field: "FromDate", title: "When", template: '#= kendo.toString(kendo.parseDate(FromDate), "M-d h:mm tt")#-#= kendo.toString(kendo.parseDate(ToDate), "h:mm tt")#' },
{ field: "ServiceId", title: "Service", dataTextField: "Name", dataValueField: "Id", dataSource: locationsDataSource },
{ field: "LocationId", title: "Location", dataTextField: "Name", dataValueField: "Id", dataSource: locationsDataSource },
{ field: "EmployeeId", title: "Employee", dataTextField: "Name", dataValueField: "Id", dataSource: employeesDataSource },
{
command: [{ name: "approve", template: "<a class='k-button k-grid-approve approve'><span class='k-icon k-i-check-outline'></span>Approve</a>", visible: function (dataItem) { return dataItem.IsApproved === null; }, click: approveAppointment },
{ name: "revokeApproval", template: "<a class='k-button k-grid-revokeApproval approved'><span class='k-icon k-i-check-circle'></span>Undo Approval</a>", visible: function (dataItem) { return dataItem.IsApproved === true; }, click: revokeApproveAppointment },
{ name: "reject", template: "<a class='k-button k-grid-reject reject'><span class='k-icon k-i-cancel'></span>Reject</a>", visible: function (dataItem) { return dataItem.IsApproved === null; }, click: rejectAppointment },
{ name: "revokeRejection", template: "<a class='k-button k-grid-revokeRejection rejected'><span class='k-icon k-i-cancel-circle'></span>Undo Rejection</a>", visible: function (dataItem) { return dataItem.IsApproved === false; }, click: revokeApproveAppointment }
], width: "275px"
}
],
allowCopy: {
delimeter: ","
},
mobile: true,
navigatable: true
});