Kendo UI Grid 在空的 Grid 中显示没有数据答案

【问题标题】：Kendo UI Grid shows no data in empty GridKendo UI Grid 在空的 Grid 中显示没有数据
【发布时间】：2014-09-16 10:37:35
【问题描述】：

我正在尝试使用动态计算的数据填充 kendoUI 网格并将其推送到变量中。我的网格是在 div 标签中定义的，但是当调用该函数时，只显示网格（带有列名），没有数据。我认为我缺少一个导致此问题的一小步。这是我的问题的图片：

任何帮助将不胜感激！

这个函数产生的数据：

function calcROI(mpy) {
    var data = [];
    var g_items = new Array();
    var payment = 0;
    var d = new Date(_startDate);
    var inc = mpy / 12.00;
    var time = 0.00;
    var limit = years;

    for (var i = 0; time < years; i++, time += inc) {
        var item = new Object();
        pay = i;

        var day = new Date(d.setMonth(d.getMonth() + mpy));

        var ac = +annualCost + +(annualCost * time);

        var cost = ac + +oneTimeCost;

        var ben = +benefits + +(+benefits * time);

        var dif = ben - cost;

        var roi = (ben - cost) / cost * 100;

        data.push({
            payment: pay,
            date: day,
            aCost: ac,
            cost: cost,
            benefits: ben,
            difference: dif,
            roi: roi,
        });                    
    }
    return data;
}

该函数是从 make grid 函数内部调用的

function makeGrid2(mpy) {

    var ds = new kendo.data.DataSource({ data: calcROI(mpy) })
    ds.read();

    $("#grid").kendoGrid({
        dataSource: ds,
        height: 550,
        columns: [{
            field: "payment",
            title: "Payment",
        }, {
            field: "date",
            title: "Date"
        }, {
            field: "aCost",
            title: "Accumulated Costs"
        },{
            field: "cost",
            title: "Total Costs"
        },{
            field: "benefits",
            title: "Benefits"
        },{
            field: "difference",
            title: "Difference"
        },{
            field: "roi",
            title: "ROI%"
        }]
    });      
}

在 VS2013 中，当我输出我的数据源变量时，我得到了这个

{
"options": {
    "data": [
        {
            "payment": 0,
            "date": "2015-07-26T04:00:00.000Z",
            "aCost": 123,
            "cost": 246,
            "benefits": 123,
            "difference": -123,
            "roi": -50
        },
        {
            "payment": 1,
            "date": "2016-07-26T04:00:00.000Z",
            "aCost": 246,
            "cost": 369,
            "benefits": 246,
            "difference": -123,
            "roi": -33.33333333333333
        }
    ],
    "schema": {},
    "serverSorting": false,
    "serverPaging": false,
    "serverFiltering": false,
    "serverGrouping": false,
    "serverAggregates": false,
    "batch": false
},
"_map": {},
"_prefetch": {},
"_data": [
    {
        "payment": 0,
        "date": "2015-07-26T04:00:00.000Z",
        "aCost": 123,
        "cost": 246,
        "benefits": 123,
        "difference": -123,
        "roi": -50
    },
    {
        "payment": 1,
        "date": "2016-07-26T04:00:00.000Z",
        "aCost": 246,
        "cost": 369,
        "benefits": 246,
        "difference": -123,
        "roi": -33.33333333333333
    }
],
"_pristineData": [
    {
        "payment": 0,
        "date": "2015-07-26T04:00:00.000Z",
        "aCost": 123,
        "cost": 246,
        "benefits": 123,
        "difference": -123,
        "roi": -50
    },
    {
        "payment": 1,
        "date": "2016-07-26T04:00:00.000Z",
        "aCost": 246,
        "cost": 369,
        "benefits": 246,
        "difference": -123,
        "roi": -33.33333333333333
    }
],
"_ranges": [
    {
        "start": 0,
        "end": 2,
        "data": [
            {
                "payment": 0,
                "date": "2015-07-26T04:00:00.000Z",
                "aCost": 123,
                "cost": 246,
                "benefits": 123,
                "difference": -123,
                "roi": -50
            },
            {
                "payment": 1,
                "date": "2016-07-26T04:00:00.000Z",
                "aCost": 246,
                "cost": 369,
                "benefits": 246,
                "difference": -123,
                "roi": -33.33333333333333
            }
        ]
    }
],
"_view": [
    {
        "payment": 0,
        "date": "2015-07-26T04:00:00.000Z",
        "aCost": 123,
        "cost": 246,
        "benefits": 123,
        "difference": -123,
        "roi": -50
    },
    {
        "payment": 1,
        "date": "2016-07-26T04:00:00.000Z",
        "aCost": 246,
        "cost": 369,
        "benefits": 246,
        "difference": -123,
        "roi": -33.33333333333333
    }
],
"_pristineTotal": 2,
"_destroyed": [],
"_group": [],
"_total": 2,
"_events": {},
"transport": {
    "data": [
        {
            "payment": 0,
            "date": "2015-07-26T04:00:00.000Z",
            "aCost": 123,
            "cost": 246,
            "benefits": 123,
            "difference": -123,
            "roi": -50
        },
        {
            "payment": 1,
            "date": "2016-07-26T04:00:00.000Z",
            "aCost": 246,
            "cost": 369,
            "benefits": 246,
            "difference": -123,
            "roi": -33.33333333333333
        }
    ]
},
"reader": {},
"_requestInProgress": false,
"_aggregateResult": {}
}

【问题讨论】：

标签： javascript kendo-ui telerik kendo-grid kendo-datasource

【解决方案1】：

我已经从您的代码中创建了一个 jsFiddle，它运行良好。

http://jsfiddle.net/ra7gu/2/

我所做的只是将数据的值替换为 JSON 数组在下面一行

老

var ds = new kendo.data.DataSource({ data: calcROI(mpy) })

新的

var data=[
        {
            "payment": 0,
            "date": "2015-07-26T04:00:00.000Z",
            "aCost": 123,
            "cost": 246,
            "benefits": 123,
            "difference": -123,
            "roi": -50
        },
        {
            "payment": 1,
            "date": "2016-07-26T04:00:00.000Z",
            "aCost": 246,
            "cost": 369,
            "benefits": 246,
            "difference": -123,
            "roi": -33.33333333333333
        }
    ];


var ds = new kendo.data.DataSource({ data: data })

现在只需检查您的 calcROI(mpy) 函数是否返回正确的 JSON 数组？

【讨论】：

【解决方案2】：

function calcroi(mpy){
var rows = { data: [] };
    var g_items = new Array();

    var months=12.00/mpy;

    var limit = years * months; // max num rows
    var inc = mpy / 12.00; //

    var pay = 0;

    for (var i = 0; i <limit; i++) {
        var d = new Date(_startDate);
        var time = (i+1) * inc;
        var item = new Object();
        var day = kendo.toString(new Date(d.setMonth(d.getMonth() + (i+1 * mpy))), "D");
        item["Date"] = new Date(d.setMonth(d.getMonth() + (i+1 * mpy)));
        //var ac = +annualCost + +(annualCost * time);
        var ac =  +(annualCost * time);
        var cost = ac + +oneTimeCost;
        //var ben = +benefits + +(+benefits * time);
        var ben =  +(+benefits * time);
        var dif = ben - cost;
        var roi = (ben - cost) / cost * 100;
        pay = i+1;


        item["Roi"] = parseFloat(roi.toFixed(2));
        item["Goal"] = goal;
        g_items.push(item);

        rows.data.push({
            "payment": pay,
            "date": day,
            "aCost": kendo.toString(ac, "c"),
            "cost": kendo.toString(cost, "c"),
            "benefits": kendo.toString(ben, "c"),
            "difference": kendo.toString(dif, "c"),
            "roi": parseFloat(roi.toFixed(2)) +"%",//kendo.toString(roi, "p"),
        });
        if (i == 0) { baseRoi = roi; }
    }//end for loop
return rows;
}

【讨论】：