如何在Kendo網格列中顯示相關外鍵數據

Question

我有一個劍道網格，它由角度控制器控制：

<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如下所示。 請注意，請不要在網格html屬性中放入k-data-source="gridData" ，因為您已經具有網格選項。

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