Date issue in Kendo Grid

Question

My application is running server which has time zone UTC+05:30. My client machine has UTC-05:00 time zone.

Now suppose he enter 12/31/1989 in a textbox and save the form, when he view detail in kendo grid the date is shown as 12/30/1989 instead of 12/31/1989.

I debugged the application by changing timezone of my pc and in debugging I found that

1. Date don't change until insert/update statement fired. It stays as 12/31/1989.
2. In database date is also stored as 12/31/1989.
3. When I get data from database, in model and controller date is still 12/31/1989.
4. But when I return data to kendo grid in JSON format using following query, it shows date on page as 12/30/1989.

C#

public ActionResult GetPatients([DataSourceRequest] DataSourceRequest request, int includePatientId = 0)
{
  return Json(this.patienModel.RetrieveActivePatients().ToDataSourceResult(request));
}

Kendo Grid

@(Html.Kendo().Grid<RxConnectEntities.Patient>
       ().Name("PatientList")
       .Columns(columns =>
       {
         columns.Bound(p => p.PatientID).Visible(false);
         columns.Bound(p => p.Name).Width(100);
         columns.Bound(p => p.Gender).Width(80);
         columns.Bound(p => p.DateOfBirth).Width(90)
                .Format("{0:MM/dd/yyyy}")
                .EditorTemplateName("DateOfBirth")
                .Filterable(false).HtmlAttributes(new { id = "gridDateOfBirth" })
                .ClientTemplate("#: kendo.toString(kendo.parseDate(data.DateOfBirth),'MM/dd/yyyy') #");
                columns.Bound(p => p.PhoneNumber).Title("Phone Number").Width(110);
                columns.Command(command =>
                {
                  command.Custom("Select").Click("OnSelectRow");
                  command.Custom("Edit").Text("Edit").Click("EditGrid");
                }).Width(120);
         })
         .Pageable(p => p.PageSizes(true))
         .DataSource(dataSource => dataSource
         .Ajax().ServerOperation(true)
         .PageSize(5)
         .Model(m => m.Id(p => p.PatientID))
         .Read(read => read.Action("GetActivePatientList", "Order")
         .Data(@"function(){
               return{
                 includePatientId:" + (TempData["includePatientId"] ?? 0) + @"
               }
          }"))
          .Destroy(delete => delete.Action("Deletepatient", "Order"))
       )
    )

Answer 1

I had the similar kind of problem with strongly typed Kendo grid. It sounds weird, changing the strongly typed one to its JS counterpart solved my problem. I couldn't find any explanation but I guess cause I can explicitly tell a column type = "date". I know its not a logical but at least you can try.

schema: {
            model: {
                id: "PatientID",
                fields: {
                    PatientID: {},
                    Name: {},
                    Gender: {}
                    DateOfBirth: { type: "date" }                        
                }
            }
        }