javascript 如何使用有角度的 $http GET 调用填充 Kendo 网格

How to populate Kendo grid with an angular $http GET call

提问by Mohammad Sepahvand

I'm having trouble binding a Kendo grid to an angular service call. I have an angular $httpservice that has a getData()method which looks like this:

我在将 Kendo 网格绑定到角度服务调用时遇到问题。我有一个 angular$http服务，它的getData()方法如下所示：

'use-strict';

payrollApp.factory('dataService', function ($http, $q) {
    return {
        getData: function () {
            var deferred = $q.defer();
            $http({
                method: 'GET',
                url: '/api/apihome/',
           }).success(function (data, status, headers, config) {
                deferred.resolve(data);
            }).error(function (data, status, headers, config) {
                deferred.reject(status);
            });
            return deferred.promise;
        },
    };
});

I then set the grids DataSourcein my controller as follows:

然后DataSource我在我的控制器中设置网格如下：

'use-strict';
payrollApp.controller('KendoDataGridController', function KendoDataGridController($scope, dataService) {

    var companiesList = dataService.getCompanies();
    companiesList.then(function(companies) {
        console.log(JSON.stringify(companies, undefined, 2));
        $scope.companies = new kendo.data.DataSource({
            data: companies,
            pageSize: 10
        });
    }, function(status) {
        window.alert(status);
        console.log(status);
    });
}
);

but my grid is not populating. When I set the DataSource's data manually (hard-coded JSON array) it works fine but not when I'm getting the data in my service call, the JSON array being returned by my service is also a valid JSON array (exactly the same as the one I hard coded). Anybody has an idea? I have a feeling this is a promise issue, but even then I'm setting my $scope'scompaniesproperty when the promise is resolved.

但我的网格没有填充。当我手动设置 DataSource 的数据（硬编码的 JSON 数组）时，它工作正常，但当我在服务调用中获取数据时，我的服务返回的 JSON 数组也是一个有效的 JSON 数组（与我硬编码的那个）。有人有想法吗？我有一种感觉，这是一个承诺问题，但即使如此，$scope'scompanies当承诺得到解决时，我也会设置我的财产。

Thanks.

谢谢。

回答by Mohammad Sepahvand

I managed to fix it, there's 2 ways (quite possibly more) of doing this:

我设法修复它，有两种方法（可能更多）这样做：

1.One is to directly give your kendo grid's datasource the adrress of the Api controller:

1.一种是直接给你的剑道网格的数据源Api控制器的地址：

$scope.companies = new kendo.data.DataSource({
               transport: {
               read: {
                      url: '/api/apihome',
                      dataType: 'json'
                     },
               },
               pageSize: 10  
});

There's a full explanation here. But I don't like doing this because I'd rather not hard code API controller addresses in my controller, I prefer to have a service or something return me the data and then pass that on to my grid (Imagine for example wanting to add a token in the $httprequest headers). So after some messing around I got a way of hooking up the grid with my original approach:

有一个完整的解释here。但我不喜欢这样做，因为我不想在我的控制器中硬编码 API 控制器地址，我更喜欢让服务或其他东西返回我的数据，然后将其传递给我的网格（想象一下，例如想要添加$http请求标头中的令牌）。因此，经过一番折腾，我找到了一种用我原来的方法连接网格的方法：

2.We can just hook up the read function of the grid to another function in our service or whatever, which can be any method returning a promise, i.e. a $httpcall:

2.我们可以将网格的 read 函数连接到我们服务中的另一个函数或其他函数，它可以是任何返回承诺的方法，即$http调用：

dataSource: {
            transport: {
                read: function (options) {//options holds the grids current page and filter settings
                    $scope.getCompanies(options.data).then(function (data) {
                        options.success(data);
                        $scope.data = data.data;//keep a local copy of the data on the scope if you want
                        console.log(data);
                    });
                },
                parameterMap: function (data, operation) {
                    return JSON.stringify(data);
                }
            },
            schema: {
                data: "data",
                total: "total",
            },
            pageSize: 25,
            serverPaging: true,
            serverSorting: true
        },

EDIT

编辑

Regarding how to add items that are already available to the grid, and how to have subsequent requests to the server to get new data, this is how I've gone about doing this:

关于如何向网格添加已经可用的项目，以及如何向服务器发出后续请求以获取新数据，我是这样做的：

The grid has an autoBindproperty, setting that to false prevents the grid automatically calling the server when the view is loaded. So to add items manually I set this to false, and then add rows to the grid via the dataSource.add()method. After that calling dataSource.read()will retrieve more data from the server:

网格有一个autoBind属性，将其设置为 false 可防止网格在加载视图时自动调用服务器。因此，要手动添加项目，我将其设置为 false，然后通过该dataSource.add()方法将行添加到网格中。之后调用dataSource.read()将从服务器检索更多数据：

    $scope.companiesGridOptions = {
        dataSource: new kendo.data.DataSource({
            transport: {
                read: function (options) {
                    var config = {
                        method: "GET",
                        url: "/api/companies/GetCompanies"
                    };
                    $http(config).success(function (data) {
                        angular.forEach(data, function(d) {
                            $scope.companiesGridOptions.dataSource.add(d);
                        });

                    });
                }
            },....

Adding items manually to the grid: $scope.companiesGridOptions.dataSource.data([{id:1,title:"..."}, {id:2,title:"..."}]);

手动将项目添加到网格： $scope.companiesGridOptions.dataSource.data([{id:1,title:"..."}, {id:2,title:"..."}]);

Calling dataSource.read()forces a server call to retrieve data: $scope.companiesGridOptions.dataSource.read();

调用dataSource.read()强制服务器调用检索数据： $scope.companiesGridOptions.dataSource.read();

回答by Slaven Tomac

I think you should try refreshing your grid once you populate new data:

我认为您应该在填充新数据后尝试刷新网格：

your_grid.refresh();