[Solved] Date formatting issues

[Ryan]

I'm having problems when trying to format the date that's displayed on a grid.

With the following code:

@(Html.Kendo().Grid(Model.Users)
      .Name("Grid")
      .Columns(columns =>
                   {
                       columns.Bound(u => u.UserView.CreatedOn).Format("{0:g}");
                       columns.Bound(u => u.UserView.ID).Title("").Sortable(false).Width(100)
                           .ClientTemplate("<a class='button' href='" +
                                              Url.Action("EditUser", "Admin") +
                                              "/#= UserView.ID #'" +
                                              ">Edit</a>"
                           );
                   })
      .Pageable()
      .Sortable()
      .Scrollable(scr => scr.Height(400))
      .Resizable(resize => resize.Columns(true))
      .DataSource(dataSource => dataSource.Ajax().ServerOperation(false)))

The date appears unformatted (e.g. /Date(1361292162723)/) and the edit button appears in the other column (see the edit image).

If I change the code so that the date column uses a client template with the date formatting:

@(Html.Kendo().Grid(Model.Users)
      .Name("Grid")
      .Columns(columns =>
                   {
                       columns.Bound(u => u.UserView.CreatedOn).ClientTemplate("#=CreatedOn ? kendo.format('{0:d}', kendo.parseDate(CreatedOn)) : ''#");
                       columns.Bound(u => u.UserView.ID).Title("").Sortable(false).Width(100)
                           .ClientTemplate("<a class='button' href='" +
                                              Url.Action("EditUser", "Admin") +
                                              "/#= UserView.ID #'" +
                                              ">Edit</a>"
                           );
                   })
      .Pageable()
      .Sortable()
      .Scrollable(scr => scr.Height(400))
      .Resizable(resize => resize.Columns(true))
      .DataSource(dataSource => dataSource.Ajax().ServerOperation(false)))

Then the date formats correctly but the edit button in the other column no longer appears. It just shows the ID as a string (see the noedit image).

How can I get the date to format correctly and have the other client template working?

[Ryan]

Any ideas on how to resolve this?

[Daniel]

Hello,

The dataSource schema does not support nested objects so the approach with the client template will be needed. The edit button will not be shown because there will be a JavaScript error thrown for trying to access a field that does not exist. You should use "UserView" object in order to get the "CreatedOn" value e.g.

columns.Bound(p => p.UserView.CreatedOn).ClientTemplate("#= data.UserView ? kendo.format('{0:d}', kendo.parseDate(UserView.CreatedOn)) : ''#");

Regards,
Daniel
the Telerik team

[Ryan]

Thanks for your response Daniel.

I have tried using the UserView object but all the dates then display as "null" (see the image attached)

columns.Bound(u => u.UserView.CreatedOn).ClientTemplate("#= data.UserView ? kendo.format('{0:d}', kendo.parseDate(UserView.CreatedOn)) : ''#");
                               columns.Bound(u => u.UserView.ID).Title("").Sortable(false).Width(100)
                                   .ClientTemplate("<a class='button' href='" +
                                                      Url.Action("EditUser", "Admin") +
                                                      "/#= UserView.ID #'" +
                                                      ">Edit</a>"

[Daniel]

Hello again Ryan,

I am not sure what is causing the problem. I attached my test project. Could you check it and let me know if I am missing something and if the dates are displayed correctly on your side?

Regards,
Daniel
the Telerik team