Kendo UI Grid不从数据源加载数据

时间:2013-02-28 13:51:35

标签: kendo-ui observable kendo-grid

我是kendo UI框架的新手。我正在使用kendoGrid与可观察数据源进行斗争。 问题是表被创建但是有空数据。 这是链接http://jsfiddle.net/praveeny1986/Pf3TQ/5/

代码:

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

请建议我做错了什么?

提前致谢

1 个答案:

答案 0 :(得分:3)

在创建和绑定数据源时,您的表数据未定义。

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

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

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