Kendo UI Grid 不会绑定到数据

Posted 2023-05-07

【中文标题】Kendo UI Grid 不会绑定到数据

【英文标题】：Kendo UI Grid won't bind to data

【发布时间】：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.
    );

);

感谢任何帮助。谢谢。

【参考方案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