Question

我正在使用Kendo UI创建主/细节网格，并在每个网格中显示一些 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的子网格中显示DateTime值

2 个答案: