javascript - 在 kendo.ui.GridColumn 中格式化日期和 boolean 值

Question

在我们的 typescript 应用程序中，我们有一个剑道网格。在 Product.ts 中，我定义如下所示的列:

const cols = <kendo.ui.GridColumn[]>[
    { field: "Name", title: "Name" },
    { field: "ProductDate", template: "#= kendo.toString(ProductDate, 'dd.MM.yyyy') #" title: "Date" },
    { field: "IsNew", template: "# if (IsNew == true) { 'Yes' } else { 'No } #", title:"Is new" }];

之后，我使用以下方法将它们添加到网格中:

let grid = this.grid.kendoGrid({
    dataSource: this.unitDataSource,
    pageable: true,
    filterable: true,
    sortable: true,
    columns: cols
}).data("kendoGrid");

现在我遇到了日期和 boolean 字段未正确显示的问题:

Format of ProductDate in grid: 2016-08-23T15:37
IsNew isn't shown at all

而不是 template我也尝试过 format: "{0:dd.MM.yyyy}"对于给我相同结果的日期。

我在浏览器控制台中没有收到任何错误消息。

我做错了什么？

编辑

迪莫迪的回答解决了我的 boolean 字段问题。我的模板现在看起来像这样:

"# if (IsNew == true) { # Yes # } else { # No # } #"

正如 P. Ommer 在他的回答中所写，我将日期添加到了架构中。现在，日期在我的模板中以正确的格式显示，但如果没有指定日期，则显示“null”而不是不显示任何内容。当我将模板更改为"# if (ProductDate != null) { kendo.toString(ProductDate, 'dd.MM.yyyy') #"时，每行的产品日期列保持为空。

如何处理日期的空列？

Answer 1

除了P建议的数据字段类型的必需定义之外。嗯， boolean 列模板应该这样定义:

template: "# if (IsNew == true) { # Yes # } else { # No # } #"

换句话说，Yes 和 No 字符串应该位于模板的 JavaScript 部分之外。

http://docs.telerik.com/kendo-ui/framework/templates/overview#handle-external-templates-and-expressions

如果日期以标准方式序列化，则不需要转换日期:

https://stackoverflow.com/a/38903675/3086237

如果您确实需要手动转换(解析)日期，正确的位置是 Kendo UI 数据源的 schema.parse 函数:

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.parse

根据设计，空值显示为“空”字符串。使用模板来避免这种情况是完全可以的。