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

Question

在我们的typescript应用程序中，我们有一个剑道网格。在产品。我像这样定义列:

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所建议的。在中，布尔列模板应该这样定义:

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

如果你需要手动转换(解析)日期，正确的地方是剑道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);
                }
            },