同一 Telerik Kendo UI 网格中的日期格式不同

Question

我一直在我的 MVC3 项目中使用 Kendo 网格，没有任何问题。但是最近我添加了一些 Ajax 仅包含 3 个日期列的 MVC razor 网格。虽然日期的格式完全相同，但其中一列只是拒绝被识别为日期并且没有格式化。

我尝试使用 Microsoft json 日期格式，然后编写了我自己的 JsonNetResult class 以将日期格式化为 ISO 8601 格式，最后我修改了它以生成如下所示的日期格式低于 'yyy-MM-dd HH:mm:ss'。 None 这些格式允许我重新格式化 'Uploaded Date' 列的日期！！其他两列被识别为日期和相应的格式。

C# 模型（为简洁起见删除了其他道具）如下所示：

public class EmailAuditListModel
{
    public DateTime Date { get; set; }
    [DisplayName("Investor's alert sent")]
    public DateTime? InvestorSent { get; set; }
    [DisplayName("Adviser's alert sent")]
    public DateTime? AdviserSent { get; set; }

    public virtual DocumentListModel Document { get; set; }
}

public class DocumentListModel
{
    [DisplayName("DocId")]
    public int DocId { get; set; }

    [DisplayName("Uploaded Date")]
    public DateTime UploadDate { get; set; }
}

JSON 是以下格式的集合（删除了额外的字段）。可以看到日期都是一致的。

{
  "Date": "2015-03-27 17:56:37",
  "InvestorSent": "2015-03-27 17:56:39",
  "AdviserSent": "2015-03-27 17:56:36",
  "Document": {
    "UploadDate": "2015-03-27 17:42:49"
  }
}

Razor 视图代码（删除了额外的字段）是：

@(Html.Kendo().Grid<EmailAuditListModel>()
          .Name("EmailAuditGrid")
          .Columns(columns => 
          {
              columns.Bound(e => e.InvestorSent).Format("{0:dd/MM/yyyy HH:mm}").Hidden(true);
              columns.Bound(e => e.AdviserSent).Format("{0:dd/MM/yyyy HH:mm}").Hidden(true);
              columns.Bound(e => e.Document.UploadDate).Format("{0:dd/MM/yyyy HH:mm}");
          })
          .Groupable()
          .Sortable()
          .Filterable()
          .Resizable(resize => resize.Columns(true))
          .Pageable(pageable => pageable
              .Refresh(true)
              .PageSizes(true)
              .ButtonCount(5))
          .DataSource(datasource => datasource
              .Ajax()
              .Read(read => read.Action("EmailAudits_Read","Document"))
              .Sort(sort => sort.Add(e => e.Document.UploadDate).Descending()))
          .ColumnMenu()
          )

...网格看起来像

有什么想法吗？？

Answer 1

我解决这个问题的第一个方法是在将模型传递给 Kendo 网格配置之前展平模型。

public class EmailAuditListModelFlat
{
    public DateTime Date { get; set; }
    public DateTime? InvestorSent { get; set; }
    public DateTime? AdviserSent { get; set; }
    public DateTime DocumentUploadDate { get; set; }
}

PS。应该是评论吧，我现在还写不出来

Answer 2

上传日期不同的原因是被识别为字符串类型而不是日期类型。不幸的是，这是绑定到网格的 DataSource 对象的限制。为了正确获取日期格式，您可以尝试以下操作之一：

1) 将日期放在模型对象的根级别（根据@suvroc 的）post 这很好，但这意味着您必须更改模型才能与前端一起使用。

2) 在您的子模型中提供日期的字符串格式版本，如下所示：

public class DocumentListModel
{
    [DisplayName("DocId")]
    public int DocId { get; set; }

    [DisplayName("Uploaded Date")]
    public DateTime UploadDate { get; set; }

    [DisplayName("Uploaded Date")]
    public string UploadDateToString 
    {
        get
        { 
            return UploadDate.toString("dd/MM/yyyy HH:mm");
        }
    }
}

然后从当前上传的属性更改您的网格绑定。

3) 使用内置客户端模板重新格式化列，如下所示：

columns.Bound(e => e.Document.UploadDate)
.ClientTemplate("#=reformatDateTime(data.Document.UploadDate,'dd/MM/yyyy HH:mm')#");

然后使用这样的 javascript 函数：

function reformatDateTime(dateValue, dateFormat){
     return kendo.toString(kendo.parseDate(dateValue), dateFormat); 
}

这样做的目的是将日期值转换为有效的日期对象，然后根据您传入的日期格式对其进行格式化。

我个人更喜欢选项 3，因为它更简单、更易于维护，而且一旦编写好，就可以在任何地方重复使用。

好吧，我希望这对您有所帮助，如果您需要更多信息，请告诉我。

同一 Telerik Kendo UI 网格中的日期格式不同

Date formatting differently in the same Telerik Kendo UI Grid

json

asp.net-mvc-3

datetime

kendo-ui

kendo-grid