Kendo UI Grid não carregando dados da fonte de dados - kendo-ui, observável, kendo-grid

Eu sou novo no framework Kendo UI. Estou lutando com fontes de dados observáveis ​​com kendoGrid. O problema é que a tabela é criada, mas com dados vazios. Aqui está o link http://jsfiddle.net/praveeny1986/Pf3TQ/5/

E o código:

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

Por favor, sugira o que estou fazendo de errado?

desde já, obrigado

Respostas:

Os dados da sua tabela são indefinidos no momento em que você cria e vincula a fonte de dados.

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

Mova a declaração de tabledata1 para antes de criar a fonte de dados. Veja este violino atualizado.

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