Set column type as data on Kendo Grid in javascript

Question

I have a kendo grid that is generated with javascript. I have no datasource as the data is on the page, then the javascript generates the grid over it. I am trying to set a column as type Date, but when I do the column just shows up empty.

This is the script for generating the kendo grid

var grid = $("#punches").kendoGrid({
        dataSource: {
            pageSize: 15,
            schema: {
                model: {
                    fields: {
                        PunchDay: { type: 'date' }
                    }
                }
            }
        },
        sortable: true,
        selectable: "multiple",
        pageable: true,
        filterable: true,
        scrollable: false,
        groupable: true,
        resizable: true
    }).data("kendoGrid");

The PunchDay column is showing empty when I set the type. I believe it has something to do with the data in that column being set like this

@FieldTranslation.ToShortDate(Html.DisplayFor(modelItem => item.PunchDay).ToString())

Since its a string and not a date format. However, I don't have a way around this. My grid code is

 <table class="table" id="punches"> <thead> <tr> <th title="@FieldTranslation.GetLabel("ID", GlobalVariables.LanguageID)"> @FieldTranslation.GetLabel("ID", GlobalVariables.LanguageID) </th> <th title="@FieldTranslation.GetLabel("EmployeeName", GlobalVariables.LanguageID)"> @FieldTranslation.GetLabel("EmployeeName", GlobalVariables.LanguageID) </th> <th title="@FieldTranslation.GetLabel("PunchDay", GlobalVariables.LanguageID)"> @FieldTranslation.GetLabel("PunchDay", GlobalVariables.LanguageID) </th> <th title="@FieldTranslation.GetLabel("PunchIn", GlobalVariables.LanguageID)"> @FieldTranslation.GetLabel("PunchIn", GlobalVariables.LanguageID) </th> <th title="@FieldTranslation.GetLabel("PunchOut", GlobalVariables.LanguageID)"> @FieldTranslation.GetLabel("PunchOut", GlobalVariables.LanguageID) </th> <th title="@FieldTranslation.GetLabel("Adjustment Time", GlobalVariables.LanguageID)"> @FieldTranslation.GetLabel("Adjustment Time", GlobalVariables.LanguageID) </th> <th title="@FieldTranslation.GetLabel("Adjustment Description", GlobalVariables.LanguageID)"> @FieldTranslation.GetLabel("Adjustment Description", GlobalVariables.LanguageID) </th> <th title="@FieldTranslation.GetLabel("WorkHours", GlobalVariables.LanguageID)"> @FieldTranslation.GetLabel("WorkHours", GlobalVariables.LanguageID) </th> @*<th> @Html.DisplayNameFor(model => model.Inactive) </th>*@ <th title="@FieldTranslation.GetLabel("Department", GlobalVariables.LanguageID)"> @FieldTranslation.GetLabel("Department", GlobalVariables.LanguageID) </th> <th width="125px;" class="hidden-filter">Actions</th> </tr> </thead> <tbody> @foreach (var item in Model) { <tr> <td> @Html.DisplayFor(modelItem => item.ID) </td> <td> @Html.DisplayFor(modelItem => item.EmployeeName) </td> <td> @FieldTranslation.ToShortDate(Html.DisplayFor(modelItem => item.PunchDay).ToString()) </td> <td> @FieldTranslation.ToShortTime(Html.DisplayFor(modelItem => item.PunchIn).ToString()) </td> <td> @FieldTranslation.ToShortTime(Html.DisplayFor(modelItem => item.PunchOut).ToString()) </td> <td> @Html.DisplayFor(modelItem => item.AdjustTime) </td> <td> @Html.DisplayFor(modelItem => item.AdjustDescr) </td> <td> @Html.DisplayFor(modelItem => item.WorkHours) </td> @*<td> @Html.DisplayFor(modelItem => item.Inactive) </td>*@ <td> @Html.DisplayFor(modelItem => item.Department) </td> <td> <a href="@Url.Action("EditTime", "TimePunches", new {id = item.ID, flt = ViewBag.FLT})" title="Edit"><i class="icon-edit fa fa-pencil fa-fw fa-lg"></i></a> <a href="@Url.Action("PunchLogIndex", "TimePunches", new {id = item.ID, flt = ViewBag.FLT})" title="Punch Log"><i class="icon-purple fa fa-book fa-fw fa-lg"></i></a> <a href="@Url.Action("PunchRequestIndex", "TimePunches", new { punchId = item.ID, flt = ViewBag.FLT })" title="See Change Request Log"><i class="icon-niagara fa fa-list fa-fw fa-lg"></i></a> <a href="#" id="delete" data-id="@item.ID" data-client="@item.ClientID"><i class="icon-red fa fa-times fa-fw fa-lg"></i></a> </td> </tr> } </tbody> </table> 

What can I do to get my dates to reappear?

Answer 1

Try to add columns part like this

var grid = $("#punches").kendoGrid({
    dataSource: {
        pageSize: 15,
        schema: {
            model: {
                fields: {
                    PunchDay: { type: 'date' }
                }
            }
        }
    },
    sortable: true,
    selectable: "multiple",
    pageable: true,
    filterable: true,
    scrollable: false,
    groupable: true,
    resizable: true
},
columns: [
    { field: "PunchDay", title: "PunchDay", format: "{0:MM/dd/yyyy}" },
    ...
]).data("kendoGrid");