在 Kendo 的子网格中显示日期时间值

Question

我正在使用 Kendo UI 创建一个 master/detail 网格并在每个网格中显示一些 DateTime 值。

在主网格中，我可以看到预期格式的值。我正在使用我在主网格中使用的相同代码来显示子网格中的值。但是在子网格中它没有以预期的格式显示值。

我该如何解决这个问题？

截图如下：

这是视图的代码：

@using TelerikTests.Models
@model TestModel

@{
    ViewBag.Title = "Home Page";
}

@(Html.Kendo().Grid(Model.Categories)
    .Name("grid_Master")
    .Columns(columns =>
    {
        columns.Bound(c => c.ID).Hidden();
        columns.Bound(c => c.Description)
            .Width(50);
        columns.Bound(c => c.DateCategory)
            .Format("{0:yyyy/MM/dd}")   // IT WORKS!!
            .Width(100);
    })
    .HtmlAttributes(new { style = "height: 380px;" })
    .Scrollable(x => x.Height(300))
    .Sortable(x => x.SortMode(GridSortMode.MultipleColumn))
    .Filterable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .ServerOperation(false)
        .Batch(true)
        .Model(model =>
        {
            model.Id(p => p.ID);
        })
    )
    .ClientDetailTemplateId("child")
    .Events(e => e.DetailInit("detailGridInit"))
)

<script id="child" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<ProductModel>()
        .Name("gridDetail_#=ID#")
        .Columns(columns =>
        {
            columns.Bound(c => c.ID).Hidden();
            columns.Bound(c => c.DateProduct)
                .Format("{0:yyyy/MM/dd}")   // IT DOESN'T WORK
                .Width(70);
            columns.Bound(c => c.Name)
                .Width(70);
            columns.Bound(c => c.Price)
                .Width(70);
        })
        .ToClientTemplate()
    )
</script>

<script>
    function detailGridInit(e) {
        var grid = $("#gridDetail_" + e.data.ID).data("kendoGrid");
        grid.dataSource.data(e.data.Products);
    }
</script>

这是模型的代码：

public class TestModel
{
    public IEnumerable<CategoryModel> Categories { get; set; }
}

public class CategoryModel
{
    public Guid ID { get; set; }
    public string Description { get; set; }
    public DateTime DateCategory { get; set; }
    public IEnumerable<ProductModel> Products { get; set; }
}

public class ProductModel
{
    public Guid ID { get; set; }
    public DateTime DateProduct { get; set; }
    public string Name { get; set; }
    public decimal Price { get; set; }
}

Answer 1

来自 Telerik forum :

有一个 Kendo 函数可用于格式化 ClientTemplate 中的列字段。所以，改变：

columns.Bound(c => c.DateProduct)
       .Format("{0:yyyy/MM/dd}")
       .Width(70);

到

columns.Bound(c => c.DateProduct)
       .ClientTemplate("#= kendo.toString(DateProduct, 'yyyy/MM/dd') #");

编辑：你必须转义#符号。

 columns.Bound(c => c.DateProduct)
        .ClientTemplate("\#= kendo.toString(DateProduct, 'yyyy/MM/dd') \#");

Answer 2

在你们的帮助下，我终于找到了解决方案。在这里

解决方案 1

columns.Bound(c => c.DateProduct)
   .ClientTemplate("\#= kendo.toString(kendo.parseDate(DateProduct), 'yyyy/MM/dd') \#");

解决方案 2

如果 DateTime 数据类型是 nullable 那么我们可以在模板中使用条件来避免显示 null 在单元格中

columns.Bound(c => c.DateProduct).ClientTemplate(
   "\# if (DateProduct) { \#" +
   "\#=   kendo.toString(kendo.parseDate(DateProduct), 'yyyy/MM/dd') \#" +
   "\# } \#");

在 Kendo 的子网格中显示日期时间值

Showing DateTime value in Kendo's child grid

c#

asp.net-mvc

kendo-grid

kendo-asp.net-mvc