在 kendo.ui.GridColumn 中格式化日期和布尔值

Question

在我们的打字稿应用程序中，我们有一个剑道网格。在 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");

现在我遇到了日期和布尔字段未正确显示的问题：

网格中 ProductDate 的格式：2016-08-23T15:37
IsNew 根本没有显示

除了template，我还尝试使用format: "{0:dd.MM.yyyy}" 来获得相同结果的日期。

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

我做错了什么？

编辑

dimodi 的回答解决了我的布尔字段问题。我的模板现在看起来像这样：

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

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

如何处理日期的空列？

Answer 1

除了数据字段类型的必需定义，如 P. Ommer，布尔列模板应该这样定义：

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

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

Answer 2

我有同样的问题。对我来说，它可以像这样向数据源添加架构：

 schema: {
                    model: {
                        fields: {
                            ClientTimestamp: {
                                type: "date"
                            },
                            Message: {
                                type: "string"
                            }
                        }
                    }
                }

我也将我的日期转换为一个 js 日期对象，如下所示：

 dataBinding: function (e) {
                for (var i = 0; i < e.items.length; i++) {
                     e.items[i].date = new Date(e.items[i].date);
                }
            },