Styjun

I am having an issue with Kendo grid pop up editor not sending date data to the server side.

Please see the code below:

JavaScript:

$(document).ready(function () 
 var serviceBaseUrl = "@Request.Url.ToString()",
 lostPropertyDataSource = new kendo.data.DataSource(
 transport: 
 create: 
 url: serviceBaseUrl + "/AddLostProperty",
 type: "POST",
 dataType: "json",
 ,
 read: 
 url: serviceBaseUrl + "/GetLostProperties",
 type: "GET",
 dataType: "json",
 contentType: 'application/json; charset=utf-8',
 ,
 update: 
 url: serviceBaseUrl + "/UpdateLostProperty",
 type: "POST",
 dataType: "json"
 ,
 destroy: 
 url: serviceBaseUrl + "/DeleteLostProperty",
 type: "DELETE",
 dataType: "json"
 ,
 ,
 requestEnd: onRequestEnd,
 pageSize: 20,
 schema: 
 model: 
 id: "PropertyId",
 fields: 
 //PropertyId: type: "number", nullable: true ,
 PropertyName: type: "string", editable: true, validation: required: true ,
 CategoryName: type: "string", editable: true, validation: required: true ,
 PropertyDescription: validation: required: false ,
 //Image: validation: required: false ,
 FoundDate: type: "date", format: '0:dd-MM-yyyy' ,
 FoundLocation: editable: true, validation: required: false 
 
 
 ,
 );


 $("#manageLostPropertiesGrid").kendoGrid(
 dataSource: lostPropertyDataSource,
 pageable: true,
 height: 550,
 toolbar: ["create"],
 columns: [
 // command: text: "View Photo", click: showPhoto , title: " ", width: "180px" ,
 field: "PropertyName", title: "Property Name", width: "150px" ,
 field: "CategoryName", title: "Category", editor: propertyCategoryList, width: "150px",
 field: "PropertyDescription", title: "Description", width: "200px" ,
 field: "FoundDate", type: "date", title: "Found Date", format: "dd/MM/yyyy", template: "#= kendo.toString(kendo.parseDate(FoundDate, 'dd-MM-yyyy'), 'dd/MM/yyyy') #", width: "130px" ,
 field: "FoundLocation", title: "Found Location", width: "120px" ,
 command: ["edit", "destroy"], title: " ", width: "250px" ],
 editable: "popup"
 ).data("kendoGrid");

 function onRequestEnd(e) 
 if (e.type != "read") 
 e.sender.read();
 
 

 function propertyCategoryList(container, options) 
 $('<input name="' + options.field + '"/>')
 .appendTo(container)
 .kendoDropDownList(
 autoBind: true,
 dataTextField: "CategoryName",
 dataValueField: "CategoryName",
 valuePrimitive: false,
 autoBind: true,
 dataSource: 
 transport: 
 read: serviceBaseUrl + "/GetPropertyCategories",
 
 
 );
 
 );

The view model has got other data but the date is getting a null value even a date is entered in the grid.

And the data posted from the client side can be seen from the browser:

The question is how to send the date to the server side from Kendo Grid?

Try posting the date in another format. You can use parameterMap to change the format:

transport: 
 // ...
 parameterMap: function (data, type) 
 if (type != "read") 
 data.FoundDate = kendo.toString(data.FoundDate, "dd/MM/yyyy");
 
 return data;