Date formatting issues

5 posts, 0 answers
  1. Ryan
    Ryan avatar
    12 posts
    Member since:
    Jan 2013

    Posted 12 Apr 2013 Link to this post

    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?
  2. Ryan
    Ryan avatar
    12 posts
    Member since:
    Jan 2013

    Posted 15 Apr 2013 Link to this post

    Any ideas on how to resolve this?
  3. Daniel
    Admin
    Daniel avatar
    2219 posts

    Posted 16 Apr 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  4. Ryan
    Ryan avatar
    12 posts
    Member since:
    Jan 2013

    Posted 16 Apr 2013 Link to this post

    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>"


  5. Daniel
    Admin
    Daniel avatar
    2219 posts

    Posted 18 Apr 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top