Kendo grid sending date in wrong format - asp.net-mvc

Question

it is kendoui grid working against webapi (.net mvc 4 project)
the kendoGrid part in my js file:
$("#eventsgrid").kendoGrid({
dataSource: {
transport: {
read: { url: "/Webapi/V2/.../events", type: "GET" },
update: { url: "/Webapi/V2/.../events", type: "PUT" },
create: { url: "/Webapi/V2/.../events", type: "POST" },
destroy: { url: "/Webapi/V2/.../events", type: "DELETE" }
},
pageSize: 10,
schema: {
model: {
id: "eventId",
fields: {
eventId: { type: "number", editable: false, nullable: true },
eventCode: { type: "string" },
eventLocation: { type: "string" },
clientId:{ type: "string" },
startDate:{ type: "date" },
endDate: { type: "date" }
}
}
}
},
columns: [
{ field: 'eventId', title: 'ID', width: '50px', filterable: true },
{ field: 'eventCode', title: 'Code', width: '80px', filterable: true },
{ field: 'eventLocation', title: 'Location', width: '150px', filterable: true },
{ field: 'clientId', title: 'Client', width: '80px', filterable: true },
{ field: 'startDate', title: 'Start', width: '80px', format: "{0:MM/dd/yyyy}", filterable: { ui: "datepicker" } },
{ field: 'endDate', title: 'End', width: '80px', format: "{0:MM/dd/yyyy}", filterable: { ui: "datepicker" } },
{ command: [{ id: "edit", name: "edit", text: "Edit" }, { id: "destroy", name: "destroy", text: "Delete", width: "30px" }, { text: 'Details', click: gotouser }], title: "&nbsp", width: "240px" }
],
sortable: true,
editable: "popup",
filterable: {
extra: false,
operators: {
string: {
startswith: "Starts with",
eq: "Is equal to",
neq: "Is not equal to"
}
}
},
toolbar: [{ name: "create", text: "Add new Event" }],
pageable: { pageSizes: true | [10, 20, 30] }
});
the problem is: when i edit a record, or post a new one, the value i receive in my mvc controller for any of the date fields, is null.
when i check in my chrome tools, see what the grid sends to the controller (when you hit update in the popup), like this:
clientId: 1
startDate: Tue Jan 20 2015 00:00:00 GMT-0500 (Eastern Standard Time)
endDate: Thu Jan 22 2015 00:00:00 GMT-0500 (Eastern Standard Time)
logo: abcsd.jpg
featured: 4
obviously the date format is wrong, and i suppose that is why the controller does not see it as a date, the conversion/binding fails, and it gives me null.
How do i make it send a different format, like mm/dd/yyyy ? isn't that covered by the format definitions in the columns array?

Answer 1

You can try to use parameterMap function. Look at kendo parameterMap documentation.
Similar to this:
parameterMap: function (data, operation) {
if (operation != "read") {
var parsedDate = kendo.parseDate(data.startDate, "MM/dd/yyyy");;
data.startDate = parsedDate;
return data;
}
}
For kendo parsing dates look at kendo parseDate

Answer 2

in the parameterMap use:
var parsedDate = kendo.toString(data.startDate, "MM/dd/yyyy")
the kendo.parseDate function takes a string as a parameter

Answer 3

OK, I followed Dmitriy's line, and was able to make it work. so for future generations, here is what you need to add to your js:
update: {
url: "/Webapi/..../events",
dataType: "json",
type: "PUT",
data: function (data) {
data.startDate = kendo.toString(data.startDate, "yyyy-MM-dd");
data.endDate = kendo.toString(data.endDate, "yyyy-MM-dd");
// repeat for all your date fields
return data;
}
},
// same thing for your 'create'.
// Sorry, look like a bit of 'Repeat yourself', but at least it's working.
So again, big thanks to Dimitriy!