How to remove the UTC component when date time is displayed in the Razor Grid ?

2 posts, 0 answers
  1. Justin
    Justin avatar
    2 posts
    Member since:
    Dec 2013

    Posted 23 Oct 2014 Link to this post

    Hi,

    I am using the KendoUI Razor grid in my application with the following Settings :

    @model BMS_RDM_DTO.SnapshotGridData
        @(Html.Kendo().Grid(Model.NewRecordsGridData)
            .Name("NewRecordsGrid")
        .Columns(columns =>
        {        
            columns.AutoGenerate(true);
            columns.Command(command => command.Custom("Edit").Click("EditNewRecordGrid")).Title("Actions");

        })
        .Filterable()
                .HtmlAttributes(new { style = "height: 380px;" })
                                  .Scrollable(scroll => scroll.Enabled(true))
                    .Groupable()
                    .Sortable()
                    .Pageable(pageable => pageable
                        .Refresh(true)
                        .PageSizes(true)
                        .ButtonCount(5))
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(10)
            .ServerOperation(false)
         ).Resizable(resize => resize.Columns(true))
    )

    I have an issue with the dateTime format shown on the grid. Please refer the screenshot - I dont want the UTC component to be shown. I would like to see just the date and the time without the offset / timezone difference.

    What settings/config are required to achieve this  ? Can I set the date time formatting for the grid itself in the CSHTML ? (I can't set it for individual columns because autobind=true) 


  2. Rosen
    Admin
    Rosen avatar
    3253 posts

    Posted 24 Oct 2014 Link to this post

    Hello Justin,

    You can apply formatting in several ways for the described scenario:

    - Use the DisplayFormat attribute to decorate the appropriate properties of the ViewModel representing the Grid record:

    public class OrderViewModel
    {   
        [DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}")]
        public DateTime OrderDate
        {
            get;
            set;
        }
     
        /*..*/
    }

    - Set the action method to the AutoGenerate method to apply the formatting to all of columns bound to a DateTime:

    .Columns(columns => {
      columns.AutoGenerate(c => {
          var column = c as IGridBoundColumn;
          if (column != null && column.MemberType == typeof(DateTime))
          {
              column.Format = "{0:MM/dd/yyyy}";
          }
      });
    })


    Regards,
    Rosen
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top