Kendo ui Kendo UI网格未从数据源加载数据

我是剑道UI框架的新手。我正在与kendoGrid一起处理可观测数据源。 问题是创建的表中包含空数据。 这里是链接

以及守则：

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

请说明我做错了什么

---

提前感谢

在创建和绑定数据源时，表数据未定义

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

在创建数据源之前，将tabledata1的声明移动到。 看到这个更新的小提琴