angularjs剑道数据源数据长度为零答案

【问题标题】：angularjs kendo datasource data length zeroangularjs剑道数据源数据长度为零
【发布时间】：2014-09-10 13:32:06
【问题描述】：

我正在尝试让我的网格（由 angular 指令创建）填充数据，但它没有填充。

这是我的网格声明：

<div id="dayTypesGrid" kendo-grid k-options='dayTypesGridOptions'></div>

这是来自我的角度控制器的代码：

$scope.dayTypesGridOptions = {
    schema: {
        model: {
            id: "description",
            fields: {
                description: { editable: false, nullable: false },
                numberOfDays: { type: "number", validation: { required: true, min: 0} }
            }
        }
    },
    columns: [{
        field: "description",
        title: "Day Type"
    }, {
        field: "numberOfDays",
        title: "Number of Days"
    }]
};

到目前为止一切顺利。网格被实例化，我看到了两列。我的角度控制器执行我的数据获取调用，并将结果存储在数组 $scope.viewModel.dayTypes 中。使用浏览器开发工具，我可以看到 $scope.viewModel.dayTypes 确实包含 7 条记录的数组。我现在想在网格中显示这 7 条记录，我这样做如下：

var ds = new kendo.data.DataSource({data: $scope.viewModel.dayTypes});
$('#dayTypesGrid').data('kendoGrid').dataSource = ds;

在最后一行代码之后，我的网格仍然是空的。使用浏览器开发工具，我看到 ds.data.length 为零。

我错过了什么？

【问题讨论】：

我绑定到数组（而不是绑定到定义了传输和读取方法调用的数据源）的原因是因为 dayTypes 数组属性所属的 viewModel 有很多绑定到页面上其他控件的其他属性。所以这不是 dataSource 需要通过 http 调用来检索自己的数据的场景。

标签： angularjs kendo-ui kendo-grid

【解决方案1】：

您正在寻找的是setDataSource 方法：

$('#dayTypesGrid').data('kendoGrid').setDataSource(ds);

【讨论】：

做到了！哥们你摇滚！万分感谢

【解决方案2】：

这是我在项目中的做法，这对我有用。您的里程可能会有所不同，因为您使用的是数据而不是传输 URL，但我注意到您的网格配置的结构与我的有点不同。例如，我在创建数据源时定义了架构：

var datasource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "url/to/my/service",
                    dataType: "json"
                }
            },
            schema: {
                data: "results"
            }
        };

    var gridConfig: {
        dataSource: dataSource,
        rowTemplate: $templateCache.get("modules/reports/row.html"),
        height: 500,
        scrollable: true,
        groupable: true,
        filterable: true,
        pageable: true,
        reorderable: true,
        sortable: true,
        resizable: true,
        "columns": [
            {
                "field": "status",
                "title": "Status",
                "width": 200
            },
            {
                "field": "actions",
                "title": "Actions",
                "width": 200
            }
        ]
    }
};

【讨论】：