CODEWITHSUNDEEP
c#asp.net-mvckendo-uikendo-grid
TheDizzle
TheDizzle

Reputation: 1574

Kendo Grid MVC Bind string column to date

I have a kendo grid that receives dates from a json string as a string. I tried converting the dates to datetime in my controller, but i still don't get the date filters from the grid.

@(Html.Kendo().Grid<PTORequestsVM>()
     .Name("grid")
     .ToolBar(tools => tools.Excel())
     .Excel(e => e.AllPages(true))
     .Excel(excel => excel
     .FileName("HR.xlsx")
                  )
                  .Columns(columns =>
                  {
                      columns.Bound(e => e.EmployeeID).Hidden(true).IncludeInMenu(true);
                      columns.Bound(e => e.EmployeeName).Width(223);
                      columns.Bound(e => e.Department);
                      columns.Bound(e => e.dispType).Title("PTO Type");
                      columns.Bound(e => e.dispSDate).Width(120).Title("Start Date").Format("{0:dd/MM/yyyy}").Sortable(true);
                      //columns.Bound(e => e.StartDate).Width(120).Format("{0:MM/dd/yyyy}");
                      columns.Bound(e => e.dispEDate).Width(120).Title("End Date").Format("{0:dd/MM/yyyy}").Sortable(true);
                      //columns.Bound(e => e.EndDate).Width(120).Format("{0:MM/dd/yyyy}");
                      columns.Bound(e => e.StartTime);
                      columns.Bound(e => e.EndTime);
                      columns.Bound(e => e.TotalRequestedTime).Title("Total Time");
                      columns.Bound(e => e.dispStatus).Width(100).Title("Status");
                      columns.Template(@<text>

                    </text>)
                          .ClientTemplate(
                              "<div class='icon-center'>" +
                          //"<a href='" + Url.Action("EditPTO", "HR", new { id = "#=Id#" }) + "' title='Edit'><i class='icon-edit fa fa-pencil fa-fw fa-lg'></i></a>" +
                          //"<a href='" + Url.Action("ApprovePTO", "HR", new { id = "#=Id#" }) + "' title='Edit'><i class='icon-green fa fa-check fa-fw fa-lg'></i></a>" +
                              "<span class='talk-to-the-hand' title='Delete' id='delete' data-id='#=Id#' style='display: #=AllowDelete#;'><i class='icon-red fa fa-times fa-fw fa-lg'></i></span>" +
                              "</div>").Width(80).Title("Actions");
                  })
  .Sortable()
  .Scrollable()
  .Groupable()
  .ColumnMenu()
  .Pageable()
  .Filterable()
  .ClientDetailTemplateId("template")
  .HtmlAttributes(new { style = "height:764px;" })
  .Reorderable(reorder => reorder.Columns(true))
  .Resizable(resize => resize.Columns(true))
  .DataSource(dataSource => dataSource
      .Ajax()
      .Read(read => read.Action("PTORequestHist_Read", "HR"))
  )
  .Events(events => events.DataBound("dataBound"))
            )

I need to specify that the StartDate and EndDate columns are dates not strings but am unsure how to do so.

Upvotes: 1

Views: 2869

Answers (2)

Murat G&#252;ndeş
Murat G&#252;ndeş

Reputation: 859

You can use ClientTemplate.

columns.Bound(e => e.StartDate).ClientTemplate("#=formatDate(StartDate)#");


function formatDate(date) {
    var year = date.getFullYear(),
        month = date.getMonth() + 1, // months are zero indexed
        day = date.getDate(),
        hour = date.getHours(),
        minute = date.getMinutes(),
        second = date.getSeconds(),
        hourFormatted = hour % 12 || 12, // hour returned in 24 hour format
        hourFormatted = hour < 10 ? "0" + hour : hour, // hour returned in 24 hour format
        minuteFormatted = minute < 10 ? "0" + minute : minute;
        //morning = hour < 12 ? "am" : "pm";

    return day + "/" + month + "/" + year + " " + hourFormatted + ":" + minuteFormatted;
}

Upvotes: 1

TheDizzle
TheDizzle

Reputation: 1574

I was able to convert the date in the controller from a string using 

EndDate = new DateTime(req.EndDate.Year, req.EndDate.Month, req.EndDate.Day, 12, req.EndDate.Minute, req.EndDate.Second, DateTimeKind.Utc),

Upvotes: 0

Related Questions