0
votes

I'm trying to display a DateTime in a Kendo Grid Column but nothing is displayed, all other columns appear as they should.

Heres the model:

public class LogViewModel
{
    public int Id { get; set; }
    public string LoginName { get; set; }
    public string Message { get; set; }
    public string Task { get; set; }
    public DateTime EntryDate { get; set; }
}

The view:

@(Html.Kendo().Grid<Models.LogViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(o => o.Task).Width("20%").Title(Resources.Task);
        columns.Bound(o => o.Message).Width("55%").Title(Resources.Message);
        columns.Bound(o => o.LoginName).Width("10%").Title(Resources.User);
        columns.Bound(o => o.EntryDate).Width("15%").Title(Resources.Date);
    })
    .Sortable()
    .Filterable()
    .Resizable(r => r.Columns(true))
    .Scrollable(scrollable => scrollable.Virtual(true))
    .HtmlAttributes(new { style = "height:430px;" })
    .ColumnMenu()
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(100)
        .Read(read => read.Action("GetLogData", "Log"))
    )
)

The controller action that returns the data:

    public JsonResult GetLogData([DataSourceRequest] DataSourceRequest request)
    {
        var data = this.dbLogContext.Logs.AsQueryable();

        return Json(data.ToDataSourceResult(request, l => new LogViewModel
        {
            Id = l.Id,
            LogType = l.LogType,
            LoginName = l.LoginName,
            Message = l.DisplayableMessage,
            Task = l.DisplayableTask ?? l.Task,
            EntryDate= l.EntryDate
        }), JsonRequestBehavior.AllowGet);
    }

And here's the data that's being returned by the action:

{"Data":[{"Id":1,"LogType":2,"LoginName":"Administrador","Message":"Erro ao criar campanha. Período de vendas inválido.","Task":"Criação de Campanha","EntryDate":"\/Date(1408367803637)\/","IsKey":false},{"Id":2,"LogType":4,"LoginName":"Operador RJ","Message":"Base de sorteio exportada com campanha em andamento","Task":"Exportação de Sorteio","EntryDate":"\/Date(1408367803637)\/","IsKey":false},{"Id":3,"LogType":6,"LoginName":"Operador PE","Message":"Um EC de nome \"Farmácia do Trabalhador\" foi criado.","Task":"Criação de EC","EntryDate":"\/Date(1408367803640)\/","IsKey":false},{"Id":4,"LogType":6,"LoginName":"Administrador","Message":"Contrato de captura de \"Cielo\" foi alterado.","Task":"Edição de Contrato","EntryDate":"\/Date(1408367803640)\/","IsKey":false},{"Id":5,"LogType":6,"LoginName":"","Message":"O usuário admin logou com sucesso.","Task":"Login","EntryDate":"\/Date(1409168290103)\/","IsKey":false},{"Id":6,"LogType":6,"LoginName":"admin","Message":"Pergunta secreta definida com sucesso.","Task":"ResetSecretQuestion","EntryDate":"\/Date(1409168302973)\/","IsKey":false},{"Id":7,"LogType":6,"LoginName":"","Message":"O usuário admin logou com sucesso.","Task":"Login","EntryDate":"\/Date(1409668083280)\/","IsKey":false},{"Id":8,"LogType":6,"LoginName":"","Message":"O usuário admin logou com sucesso.","Task":"Login","EntryDate":"\/Date(1410186476820)\/","IsKey":false},{"Id":9,"LogType":6,"LoginName":"","Message":"O usuário admin logou com sucesso.","Task":"Login","EntryDate":"\/Date(1410360292757)\/","IsKey":false},{"Id":10,"LogType":6,"LoginName":"","Message":"O usuário admin logou com sucesso.","Task":"Login","EntryDate":"\/Date(1410368834727)\/","IsKey":false},{"Id":11,"LogType":6,"LoginName":"","Message":"O usuário admin logou com sucesso.","Task":"Login","EntryDate":"\/Date(1410445689033)\/","IsKey":false},{"Id":12,"LogType":6,"LoginName":"","Message":"O usuário admin logou com sucesso.","Task":"Login","EntryDate":"\/Date(1410455135503)\/","IsKey":false},{"Id":13,"LogType":6,"LoginName":"","Message":"O usuário admin logou com sucesso.","Task":"Login","EntryDate":"\/Date(1410460921197)\/","IsKey":false},{"Id":14,"LogType":6,"LoginName":"","Message":"O usuário admin logou com sucesso.","Task":"Login","EntryDate":"\/Date(1410806956787)\/","IsKey":false},{"Id":15,"LogType":6,"LoginName":"","Message":"O usuário admin logou com sucesso.","Task":"Login","EntryDate":"\/Date(1411407682677)\/","IsKey":false},{"Id":16,"LogType":6,"LoginName":"","Message":"O usuário admin logou com sucesso.","Task":"Login","EntryDate":"\/Date(1411657058883)\/","IsKey":false},{"Id":17,"LogType":6,"LoginName":"","Message":"O usuário admin logou com sucesso.","Task":"Login","EntryDate":"\/Date(1412010615887)\/","IsKey":false}],"Total":17,"AggregateResults":null,"Errors":null}

You can see above that the EntryDate field has valid values for all entries but if I try to use a ClientTemplate for the date column it says the property is null: .columns.Bound(o => o.EntryDate).Width("15%").Title(Resources.Date).ClientTemplate("#= EntryDate #");.

The JSON dates are in MS format, which the kendo grid should be able to parse, and I already tried formatting the date in ISO/UTC date format and javascript date format but the problem persists.

I'm using Telerik's UI tools for Asp.Net MVC version 2014.2.903.545.

1

1 Answers

0
votes

Found the problem. Globalize.js's parseDate was overriding kendo's own parseDate method.

If you are having the same problem, the solution is to register globalize.js AFTER you have registered kendo's culture javascript.

You can find more information on the issue here.