La cuadrícula de la interfaz de usuario de Kendo no carga datos del origen de datos: kendo-ui, observable, cuadrícula de kendo

Soy nuevo en el marco de kendo UI. Estoy luchando con una fuente de datos observable con kendoGrid. El problema es que la tabla se crea pero con datos vacíos. Aqui esta el link http://jsfiddle.net/praveeny1986/Pf3TQ/5/

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

¿Sugiere lo que estoy haciendo mal?

Gracias por adelantado

Respuestas

Los datos de su tabla no están definidos en el momento en que crea y vincula el origen de datos.

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

Mueva la declaración de tabledata1 a antes de crear el origen de datos. Ver este violín actualizado.

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