Kendo UI Grid不会绑定到数据

时间:2014-03-15 05:59:30

标签: kendo-ui kendo-grid

我有一个不会加载数据的Kendo UI网格。它正在运行,然后我将其升级到最新版本的Kendo UI。我查看了代码和文档,一切看起来都正确。没有错误,我知道数据正在进入网格(至少是dataSource中的解析函数)。

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

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

这是来自小提琴的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.
    });

});

感谢任何帮助。感谢。

2 个答案:

答案 0 :(得分:2)

Kendo UI在内部使用错误(信息here)并与您的errors字段混淆。

尝试将其更改为其他内容,例如_errors,就像修改JSFiddle http://jsfiddle.net/OnaBai/9J7T6/3/

一样

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

的修改一样

答案 1 :(得分:1)

夫妻俩。在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