Kendo UI Grid 不会绑定到数据答案

【问题标题】：Kendo UI Grid won't bind to dataKendo UI Grid 不会绑定到数据
【发布时间】：2014-04-20 15:22:26
【问题描述】：

我有一个不会加载数据的 Kendo UI 网格。它工作正常，然后我将其升级到最新版本的 Kendo UI。我浏览了代码和文档，一切看起来都正确。没有错误，我知道数据正在进入网格（至少到数据源中的解析函数）。

这是一个显示错误的 JSFiddle。 http://jsfiddle.net/9J7T6/1/

我对示例中的数据进行了硬编码，但我的实际代码使用 JSON 从 Web 服务中获取数据。

这是来自 Fiddle 的 JS...

var errSrc = new kendo.data.DataSource({

    data: {
        "total": 68178,
        "errors": [
          {
            "ErrorID": "57c1f4cc-87a7-4fff-9580-3543bba0902f",
            "ApplicationName": "MyApp",
            "HostName": "WEB05",
            "Message": "A potentially dangerous Request.Path value was detected from the client (:).",
            "Source": "System.Web",
            "StatusCode": 400,
            "Time": "2014-01-13T21:44:54.53-08:00",
            "Type": "System.Web.HttpException",
            "User": ""
          },
          {
            "ErrorID": "70d27c9e-5b63-42b8-a464-818b14f20109",
            "ApplicationName": "MyApp",
            "HostName": "WEB06",
            "Message": "A potentially dangerous Request.Path value was detected from the client (:).",
            "Source": "System.Web",
            "StatusCode": 400,
            "Time": "2014-01-13T21:44:52.83-08:00",
            "Type": "System.Web.HttpException",
            "User": ""
          },
          {
            "ErrorID": "77ce535d-b131-4dc6-8f87-7bd08f1d0a9c",
            "ApplicationName": "MyApp",
            "HostName": "WEB04",
            "Message": "A potentially dangerous Request.Path value was detected from the client (:).",
            "Source": "System.Web",
            "StatusCode": 400,
            "Time": "2014-01-13T19:43:25.973-08:00",
            "Type": "System.Web.HttpException",
            "User": ""
          }
        ]
    },
    schema: {
        model: {
            ErrorID: { type: 'string' },
            ApplicationName: { type: 'string' },
            HostName: { type: 'string' },
            Message: { type: 'string' },
            Source: { type: 'string' },
            StatusCode: { type: 'number' },
            Time: { type: 'date' },
            Type: { type: 'string' },
            User: { type: 'string' }
        },
        parse: function (data) {
            // Use Sugar.js to parse the date
            $.map(data.errors, function (item) { item.Time = Date.create(item.Time); return item; });
            console.log(data);
            return data;
        },
        data: 'errors',
        total: 'total'
    },
    pageSize: 3,
    serverPaging: true,
    serverSorting: true
});

$(function () {

    $('#errs').kendoGrid({
        columns: [
            { field: 'ApplicationName', title: 'App', width: '120px', template: '<span title="#= ApplicationName #">#= ApplicationName #</span>', filterable: true },
            { field: 'HostName', title: 'Host', width: '80px' },
            { field: 'StatusCode', title: 'Code', width: '50px' },
            { field: 'Type', title: 'Type', width: '200px' },
            { field: 'Message', title: 'Error', template: '#= Message # <a href="/ElmahViz/Details/#= ErrorID #" target="elmah#= ErrorID #" class="details-link">Details...</a>' },
            { field: 'User', title: 'User', width: '100px' },
            { field: 'Time', title: 'Date', width: '100px', format: '{0: MM/dd/yyyy}' },
            { field: 'Time', title: 'Time', width: '100px', format: '{0: hh:mm tt}' }
        ],
        dataSource: errSrc,
        selectable: false,
        groupable: true,
        sortable: true,
        pageable: true,
        scrollable: true // enabled so that we can have fixed width columns.
    });

});

感谢任何帮助。谢谢。

【问题讨论】：

标签： kendo-ui kendo-grid

【解决方案1】：

Kendo UI 在内部使用错误（信息here）并与您称为errors 的字段混淆。

尝试将其更改为其他内容，例如 _errors，就像在您的 JSFiddle 的此修改中一样 http://jsfiddle.net/OnaBai/9J7T6/3/

或者尝试将架构定义中的 errors 重新定义为其他内容，例如 _errors，就像在您的 JSFiddle 的此修改中一样 http://jsfiddle.net/OnaBai/9J7T6/4/

【讨论】：

【解决方案2】：

几件事。在 parse 函数中，$.map 返回一个数组。所以把它改成

var fixedData = $.map(data.errors, function(item) ...

其次，要将总数和数据集放入网格中，您需要对其进行更改

return data;

类似

return { results: fixedData, total: data.total };

然后将data: 'errors' 更改为data: 'results',。

这是一个工作示例。 http://jsbin.com/qewiq/1/edit

【讨论】：