无法使用 KendoUI Grid 和 Knockout-Kendo 格式化日期答案

【问题标题】：Unable to format date with KendoUI Grid and Knockout-Kendo无法使用 KendoUI Grid 和 Knockout-Kendo 格式化日期
【发布时间】：2013-04-26 20:52:01
【问题描述】：

我在获取使用 Kendo Grid 解析的日期时遇到问题。我正在使用 Knockout-Kendo 来协助数据绑定。

我试图解析的 json 响应中的日期字符串看起来像 2012-03-13T00:00:00.

Kendo 网格的列定义包含format: '{0:MM/dd/yyyy}'，它似乎适用于另一个不使用 Knockout-Kendo 解析完全相同的日期字符串的网格。

我创建了（很好地从一个单独的问题中重复使用）一个 jsFiddle，它演示了 the issue fully here.

我想远离行模板只是因为我还没有弄清楚如何在淘汰赛绑定中正确设置它们，但我完全愿意接受替代或“正确”的建议。

【问题讨论】：

在您的示例中，salesdate 属性包含字符串而不是数据。所以剑道网格格式：'{0:MM/dd/yyyy}' 不能应用于字符串。如果您有适当的日期，它正在工作：jsfiddle.net/FVUpa
如果我可以控制服务日期时间序列化以吐出您向我展示的内容，您的建议确实有效。 Dang，如果我可以在 dataSource 中使用 Knockout-kendo 定义方案，我完全可以让它工作。当定义带有方案的数据源dataSource: { data: myData, schema: { model: { fields: { SaleDate: { type: 'date' } } } } }时，我有完全相同的字符串工作解析工作正常。

标签： knockout.js kendo-ui kendo-grid

【解决方案1】：

可以在配置中指定dataSource。您仍然需要指定 data 键，以便绑定知道您正在传递选项，而不仅仅是直接传递数据。

可能看起来像：

<div id="grid" data-bind="kendoGrid: {  
                                data: undefined,
                                dataSource: {
                                    data: SaleSearchResults,
                                   schema: { model: { fields: { SaleDate: { type: 'date' } } } }    
                                },

在此处更新小提琴：http://jsfiddle.net/rniemeyer/EUFxg/

【讨论】：

我已更新此内容以复制服务器帖子和响应。网格不反映变化的可观察量。 jsfiddle.net/CraigHead/zAFSX/10
所以提供的答案在服务器发布/响应情况下并不完全有效。那是我真正需要它工作的地方。
@Mr.Young - 抱歉 - 还没有机会看到这个。有机会我会尽力帮助你的。
有时间帮助我吗？
@Mr.Young - 抱歉耽搁了。当前未设置绑定以观察 dataSource 上的 data 属性的更改。这是未来可以在 Knockout-Kendo 中改进的东西。目前，另一种方法是将区域包装在 with 绑定中以强制重新渲染，例如：jsfiddle.net/rniemeyer/w8Lvk

【解决方案2】：

如果您将数据作为数组返回，则需要指定日期类型

<script type="text/javascript">
$(document).ready(function () {
    $("#grid").kendoGrid({
        selectable: "row",
        groupable: true,
        sortable: true,
        navigatable: true,
        pageable: true,
        columns: [
                {
                    field: "RunDate",
                    title: "Run Date",
                    width: 100,
                    format: "{0:yyyy-MM-dd}"
                }
            ],
        dataSource: {
            type: "json",
            transport: {
                read: "api/Data"
            },
            serverPaging: true,
            pageSize: 5,
            schema: {
                data: "Data",
                total: "Count",
                model: { fields: { RunDate: { type: "date"} } } 
            }
        }
    });
});

【讨论】：

【解决方案3】：

尝试以这种方式在剑道网格中格式化日期

columns.Bound(x => x.LastUpdateDate).ClientTemplate("#= kendo.toString(LastUpdateDate, \"MM/dd/yyyy hh:mm tt\") #");

【讨论】：

我没有为 Kendo UI 使用 ASP.NET MVC Wrappers。很好的建议，但没有使用 OP 中的技术。