Kendo UI Grid shows no data in empty Grid

Question

I am trying to fill a kendoUI Grid with data being dynamically calculated and pushed ito a variable. My grid is defined in a div tag, but when the function is called, only the grid is shown(with column names), no data. I think there is one small step i am missing that is causing this issue. Here is a image of my issue:

Any Help would be greatly appreciated!

the data generated in this function:

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;
}

The function is being called from inside the make grid function

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%"
        }]
    });      
}

in VS2013 when i output my datasource variable i get this

{
"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": {}
}

Answer 1

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;
}