AJAX 呼び出しから受信したデータにグリッドを再バインドするのにかなりの時間を費やしています。日付の書式が失われます。
@{
ViewBag.Title = "Index";
}
@section Scripts {
<script type="text/javascript">
var viewModel;
$(function () {
// Load Data
$.ajax({
async: false,
url: "/Kendo/Home/GetData"
}).success(function (result) {
viewModel = new kendo.observable(result);
});
// Create Grid
$("#grid").kendoGrid({
dataSource: {
data: viewModel.People,
schema: {
model: {
fields: {
DOB: { type: "date" }
}
}
}
},
columns: [
{ field: "FirstName", title: "First Name" },
{ field: "LastName", title: "Last Name" },
{ field: "DOB", title: "Date of Birth", format: "{0:MM/dd/yyyy}" }
],
editable: true
});
$(document).on("click", "#btn-save", function (e) {
$.ajax({
url: "/Kendo/Home/Save",
type: "POST",
data: JSON.stringify(viewModel),
contentType: "application/json"
}).success(function (result) {
var g = $("#grid").data("kendoGrid");
viewModel = new kendo.observable(result);
g.dataSource.data(viewModel.People);
});
});
});
</script>
}
<div id="grid"></div>
<div id="view">
<input data-bind="value: firstName" />
<input data-bind="value: lastName" />
<button id="btn-save">Save</button>
</div>
読み込まれた初期データは次のとおりです。
{"People":[{"FirstName":"Sam","LastName":"Striano","DOB":"\/Date(215420400000)\/"},{"FirstName":"Karson","LastName":"Striano","DOB":"\/Date(321609600000)\/"}]}
AJAX 呼び出し ([保存] ボタン経由) から返されるデータは次のとおりです。
{"People":[{"FirstName":"Sam 1234","LastName":"Striano","DOB":"\/Date(216288000000)\/"},{"FirstName":"Karson 1234","LastName":"Striano","DOB":"\/Date(322473600000)\/"}]}