angularjs kendo数据源数据长度为零。

Question

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

这是我的网格声明。

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

这里是我的angular控制器的代码。

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

到目前为止一切正常。网格被实例化了，我看到了两列。 我的angular控制器执行了我的数据获取调用，并将结果存储在一个数组$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为零。

我到底漏了什么？

Answer 1

你要找的是 setDataSource 的方法。

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

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