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

时间:2016-06-09 13:21:52

标签: javascript angularjs kendo-ui kendo-grid

我有一个剑道网格,由一个角度控制器控制:

"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

问题是,应该填充网格的最后一个调用无法正常工作。 using (FileStream originalFileStream = fileToDecompress.OpenRead()) { string currentFileName = fileToDecompress.FullName; string newFileName = currentFileName.Remove(currentFileName.Length - fileToDecompress.Extension.Length); using (FileStream decompressedFileStream = File.Create(newFileName)) { using (GZipStream decompressionStream = new GZipStream(originalFileStream, CompressionMode.Decompress)) { decompressionStream.CopyTo(decompressedFileStream); Console.WriteLine("Decompressed: {0}", fileToDecompress.Name); } } } 调用显示数据已加载,但网格未显示。

1 个答案:

答案 0 :(得分: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);
        });
}]);