2013-02-28 75 views
2

我是kendo UI框架中的新成員。我正在用kendoGrid與可觀察的數據源拼搏。 問題是表得到創建,但與空數據。 這裏是鏈接http://jsfiddle.net/praveeny1986/Pf3TQ/5/Kendo UI Grid未從數據源加載數據

,代碼:

var gridDataModel = kendo.data.Model.define({ 
fields: { 
    "Product": { 
     type: "string" 
    }, 
    "Domain": { 
     type: "string" 
    }, 
    "PercentPlan": { 
     type: "string" 
    }, 
    "CWV": { 
     type: "string" 
    }, 
    "Target": { 
     type: "string" 
    }, 
    "Accuracy": { 
     type: "string" 
    } 
} 
}); 

var dataSource = new kendo.data.DataSource({data: tabledata1}); 

var gridModel = kendo.observable({ 
    gridData: dataSource 
}); 
kendo.bind($("#chart"),gridModel); 
$("#chart").kendoGrid({ 
    scrollable:false, 
dataSource:gridModel.get('gridData'), 
    height:600, 
    autoBind:true, 
    columns:[ 
     { 
      field: "Product", 
      title: "Product" 
     }, 
     { 
      field: "Domain", 
      title: "Sales Domain" 
     }, 
     { 
      field: "PercentPlan", 
      title: "% to Plan" 
     }, 
     { 
      field: "CWV", 
      title: "CWV" 
     }, 
     { 
      field: "Target", 
      title: "Target" 
     }, 
     { 
      field: "Accuracy", 
      title: "Accuracy" 
     }] 
}); 
var tabledata1 = [ 
{ 
    Product:"mobile", 
    Domain:"SMARTPHONES-EAST", 
    PercentPlan:"95", 
    CWV:"160", 
    Target:"200", 
    Accuracy:"9" 
}, 
{ 
    Product:"mobile", 
    Domain:2, 
    PercentPlan:"80", 
    CWV:"160", 
    Target:"200", 
    Accuracy:"8.5" 
}, 
{ 
    Product:"mobile", 
    Domain:3, 
    PercentPlan:"75", 
    CWV:"150", 
    Target:"200", 
    Accuracy:"8" 
}, 
{ 
    Product:"mobile", 
    Domain:4, 
    PercentPlan:"60", 
    CWV:"120", 
    Target:"200", 
    Accuracy:"6" 
}, 
{ 
    Product:"mobile", 
    Domain:5, 
    PercentPlan:"50", 
    CWV:"150", 
    Target:"300", 
    Accuracy:"5" 
} 
]; 

請建議什麼,我做錯了什麼?提前

感謝

回答

3

你的表中的數據將在您創建和綁定數據源的時間不確定。

var dataSource = new kendo.data.DataSource({data: tabledata1}); 
var tabledata1 = [ ... ]; 

將tabledata1的聲明移至創建數據源之前。 看到這個更新的小提琴。

http://jsfiddle.net/nukefusion/Pf3TQ/7/