Kendo UI Grid가 빈 Grid에 데이터를 표시하지 않습니다.

Question

데이터가 동적으로 계산되고 변수가 push 된 kendoUI Grid를 채우려고합니다. 내 표가 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; 
} 

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

I 출력 내 소스 변수 i가이

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

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

Answer 2

코드에서 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 배열을 반환하는지 여부를 확인하십시오.