Kendo UI Grid nie ładuje danych z źródła danych - kendo-ui, obserwowalne, kendo-grid

Jestem nowy w kendo UI. Walczę z obserwowalnym źródłem danych z kendoGrid. Problem polega na tym, że tabela jest tworzona, ale z pustymi danymi. Tutaj jest link http://jsfiddle.net/praveeny1986/Pf3TQ/5/

A kod:

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

Proszę zasugerować, co robię źle?

Z góry dziękuję

Odpowiedzi:

Dane tabeli są niezdefiniowane w momencie tworzenia i wiązania źródła danych.

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

Przenieś deklarację tabledata1 do przed utworzeniem źródła danych. Zobacz to zaktualizowane skrzypce.

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