为什么我的 JSON 在 Kendo UI 中显示为 Datasource.options.data 而不是 Datasource.data？

Question

刚接触 Kendo，我很难将我的 JSON 数据显示在 Kendo Grid 中。如果我通过普通的 html 表引用我的 $scope.actionData，我可以在页面中查看它。

最终我正在努力完成this

页面上显示列标题，但下方没有数据。

当我尝试填充剑道网格时，我可以通过 Chrome Kendo UI Inspector 在 DataSource -> Options -> Data Array 中看到我期望的数据，但我不知道如何获取它显示在页面上，并且不填充 DataSource -> Data 数组。我已经尝试过 angular-kendo 页面上的示例，但没有运气。我也尝试在 html 中的 div 下添加各种元素/标签，但我又回到了开始的地方。

如果我需要添加任何其他内容，请告诉我。非常感谢任何帮助填充此内容。提前致谢！

HTML：

<div kendo-grid k-data-source="gridOptions"></div>

控制器：

var actionHistoryControllers = angular.module('actionHistoryControllers', ['kendo.directives'])
        .controller('ActionHistoryCtrl', ['$scope', '$routeParams', 'ActionHistory',
             function ($scope, $routeParams, ActionHistory) {
                 $scope.actionData = ActionHistory.query({ appid: $routeParams.appid },
                       function (data) {
                           $scope.error = false;
                           $scope.errorMsg = "";
                       },
                       function (data) {
                           $scope.error = true;
                           $scope.errorMsg = "<strong>Unable to load!</strong> Please reload the page.";
                       });

                 $scope.gridOptions = {
                     data: $scope.actionData,
                     columns: [
                         {field: "UserID", title: "User ID"},
                         {field: "ActionText", title: "Action Text"}]
                 }
              }])

Chrome Kendo UI 检查器：

Data source
   options: Object{9} 
   data: Array[3] 
      0: Object{17} 
        ActionHistoryID: 315911
        ActionText: "System"
        ...

Answer 1

请替换以下内容：

$scope.gridOptions = {
                     data: $scope.actionData,
                     columns: [
                         {field: "UserID", title: "User ID"},
                         {field: "ActionText", title: "Action Text"}]
                 }

以下内容：

$scope.gridOptions = {
    dataSource: {
                    transport: {
                        read: function (o) {                        
                            o.success($scope.actionData);
                        }
                    },
                     columns: [
                         {field: "UserID", title: "User ID"},
                         {field: "ActionText", title: "Action Text"}]
                }
}