javascript - 如何在 Kendo 网格列中显示相关外键数据

Question

我有一个剑道网格，它由 Angular Controller 控制:

<div>
    <kendo-grid options="mainGridOptions" k-data-source="gridData">
    </kendo-grid>
</div>

更新 正在加载数据，但未渲染网格。 (我也遇到了术语不匹配的情况，并将部门视为状态。

"use strict";
angular.module("tenderApp")
.controller("tenderCtrl", ["$scope", "adalAuthenticationService", "tenderSvc", "$q", function ($scope, adalService, tenderSvc, $q) {
    $scope.mainGridOptions = null;
    $scope.gridSource = null;
    $scope.statusData = null;

    function loadStatusData() {
        return tenderSvc.getSector()
            .then(function(sector) {
                $scope.sectorData = sector.data.map(function (obj) {
                    return {
                        text: obj.bezeichnung,
                        value: obj.id
                    };
                });
                return $scope.sectorData;
            });
    }

    function loadGridSource(result) {
        return tenderSvc.getItems()
            .then(function (res) {
                $scope.gridSource = res.data;
                return res.data;
            });
    }

    loadStatusData()
        .then(loadGridSource)
        .then(function (res) {
            //both properties are available at this point
            console.log($scope.gridSource);
            console.log($scope.sectorData);
            $scope.gridData = new kendo.data.DataSource({
                transport: {
                    read: function (e) {
                        e.success($scope.gridSource);
                    },
                    //...
                },
                //...
            });
            $scope.mainGridOptions = {
                toolbar: ["excel"],
                dataSource: $scope.gridData,
                columns: [
                    { field: "sektor", title: "Sektor", values: $scope.sectorData },
                    { command: ["edit"], title: "Aktionen", width: "120px" }
                ]
            };

        });
}]);

问题是，应该填充网格的最后一个调用无法正常工作。 console.log 调用显示数据已加载，但网格未显示。

Answer 1

很好，现在我向你学习如何进行链接。至于你的问题，我们不需要使用transport/read。相反，我们可以单独加载数据并将其设置到网格 dataSource 中，如下所示。请注意，请不要将 k-data-source="gridData" 放入网格 html 属性中，因为您已有网格选项。

HTML:

    <div><kendo-grid options="mainGridOptions" k-data-source="gridData">
    </kendo-grid></div>

JS:

"use strict";
angular.module("tenderApp")
.controller("tenderCtrl", ["$scope", "adalAuthenticationService", "tenderSvc", "$q", function ($scope, adalService, tenderSvc, $q) {
    $scope.mainGridOptions = null;
    $scope.gridSource = null;
    $scope.statusData = null;

    $scope.mainGridOptions = {
        dataSource: new kendo.data.DataSource(),
        toolbar: ["excel"],
        columns: [
            { field: "sektor", title: "Sektor", values: $scope.sectorData },
            { command: ["edit"], title: "Aktionen", width: "120px" }
        ]
    };

    function loadStatusData() {
        return tenderSvc.getSector()
            .then(function(sector) {
                $scope.sectorData = sector.data.map(function (obj) {
                    return {
                        text: obj.bezeichnung,
                        value: obj.id
                    };
                });
                return $scope.sectorData;
            });
    }

    function loadGridSource(result) {
        return tenderSvc.getItems()
            .then(function (res) {
                $scope.gridSource = res.data;
                return res.data;
            });
    }

    loadStatusData()
        .then(loadGridSource)
        .then(function (res) {
            $scope.mainGridOptions.dataSource.data($scope.gridSource);
        });
}]);