Kendo UI Grid lädt keine Daten von Datenquelle - Kendo-ui, beobachtbar, Kendo-Grid

Ich bin neu in Kendo UI Framework. Ich habe Probleme mit beobachtbaren Datenquellen mit kendoGrid. Das Problem ist, dass die Tabelle mit leeren Daten erstellt wird. Hier ist der Link http://jsfiddle.net/praveeny1986/Pf3TQ/5/

Und der Code:

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

Bitte schlagen Sie vor, was ich falsch mache?

Danke im Voraus

Antworten:

Ihre Tabellendaten sind zum Zeitpunkt der Erstellung und Bindung der Datenquelle undefiniert.

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

Verschieben Sie die Deklaration von tabledata1 nach, bevor Sie die Datenquelle erstellen. Siehe diese aktualisierte Geige.

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