How to show related foreign-key data in Kendo grid column

Question

I have a kendo grid, which is controlled by an angular controller:

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

UPDATE The data is loading, but the grid isn't rendered. (I also had a term-mismatch and treated sectors as status.

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

        });
}]);

The problem is, the last call, which should populate the grid, does not work properly. The console.log calls show that the data is loaded, but the grid does not show up.

Answer 1

Nice one, now I learn how to do chaining from you. As for your problem, we don't need to use transport/read. Instead, we can load the data separately and set it to the grid dataSource like this. Note that, please don't put k-data-source="gridData" in your grid html attribute since you already have grid options.

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