Kendo Ui Editor not sending FK on Create - ajax

Question

Using the Kendo Grid with popup Create. Here is the code with datasource:
var PersId = $("#PersonId").val();
var ds_CommentsGrid = new kendo.data.DataSource({
transport: {
read: {
url: '#Url.Action("JsonGetComments", "TrespassOrder")/' + PersId,
dataType: 'json',
},
update: {
url: '#Url.Action("JsonEditComment", "TrespassOrder")',
dataType: 'json',
type: "POST"
},
create: {
url: '#Url.Action("JsonAddComment", "TrespassOrder")',
dataType: 'json',
type: "POST"
//contentType: 'application/json; charset=UTF-8',
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
var values = {};
values["CommentText"] = options.models[0].CommentText;
values["ModifiedBy"] = options.models[0].ModifiedBy;
values["ModifiedDate"] = options.models[0].ModifiedDate;
values["CreatedBy"] = options.models[0].CreatedBy;
values["CreatedDate"] = options.models[0].CreatedDate;
values["PersonId"] = options.models[0].PersonId;
return values;
}
}
},
batch: true,
schema: {
model: {
id: "CommentId",
fields: {
CommentText: { editable: true },
CreatedDate: { editable: false , type: "date"},
ModifiedDate: { editable: false , type: "date" },
CreatedBy: { editable: false },
ModifiedBy: { editable: false },
PersonId: { editable: false}
}
}
},
pageSize: 5
});
$(document).ready(function () {
$("#comment-list").kendoGrid({
dataSource: ds_CommentsGrid,
sortable: true,
filterable: { extra: false, operators: {
string: { startswith: "Starts with", eq: "Is equal to" }
}
},
pageable: true,
columns: [{
field: "CommentText", title: "Comment", width: 300, filterable: true
}, {
field: "CreatedBy", title: "Author", filterable: false
}, {
field: "CreatedDate", title: "Original Date", format: "{0:g}", filterable: { ui: "datetimepicker" }
}, {
field: "ModifiedBy", title: "Edited By", filterable: false
}, {
field: "ModifiedDate", title: "Editted On", format: "{0:g}", filterable: { ui: "datetimepicker" }
}, {
command: ["edit"], title: "Actions"
}],
editable: "popup",
toolbar: [{ name: "create", text: "Add New Comment" }]
});
});
There are 2 problems:
1. The PersonId is not being sent with the Create.
2. The dates are being sent in a format that ends up getting to the MVC controller as null (1/1/0001).
Here is what is being sent to the controller:
Request URL:http://localhost:47621/TrespassOrder/JsonAddComment
Request Headersview source
Accept:application/json, text/javascript, */*; q=0.01
Content-Type:application/x-www-form-urlencoded; charset=UTF-8
Origin:http://localhost:47621
Referer:http://localhost:47621/Person/Detail/18
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.110 Safari/537.36
X-Requested-With:XMLHttpRequest
Form Dataview sourceview URL encoded
CommentText:Blah blah, I am a comment.
ModifiedBy:
ModifiedDate:Fri Jun 14 2013 12:12:46 GMT-0700 (Pacific Daylight Time)
CreatedBy:
CreatedDate:Fri Jun 14 2013 12:12:46 GMT-0700 (Pacific Daylight Time)
PersonId:
Notice the PersonId is empty.
Notice the commented-out contentType in the create, within the transport. I tried using the json content type, but that returned an error saying that 'CommentText is an invalid JSON primitive".
So how do I format the dates so they show up in the controller, and how do I attach the foreign key (PersonId) to the data that is sent?

Answer 1

PersonId is set as not editable, it has not default value and there is no column definition. What do you expect to be sent on creation PersId? If so, you can defaultValue in the schema.model.fields.PersonId as PersId, something like:
schema : {
model: {
id : "CommentId",
fields: {
CommentText : { editable: true },
CreatedDate : { editable: false, type: "date"},
ModifiedDate: { editable: false, type: "date" },
CreatedBy : { editable: false },
ModifiedBy : { editable: false },
PersonId : { editable: false, defaultValue: PersId}
}
}
},
Regarding the format of the transmitted dates, they are transmitted as strings so you should convert them to a format that your controller is able to parse. For doing it, you should use kendo.toString (see this article about it). You might try using Universal sortable date/time, something like:
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
var values = {};
values["CommentText"] = options.models[0].CommentText;
values["ModifiedBy"] = options.models[0].ModifiedBy;
values["ModifiedDate"] = kendo.toString(options.models[0].ModifiedDate, "u");
values["CreatedBy"] = options.models[0].CreatedBy;
values["CreatedDate"] = kendo.toString(options.models[0].CreatedDate, "u");
values["PersonId"] = options.models[0].PersonId;
return values;
}
}