有没有办法以角度刷新剑道网格？

Question

我已经尝试了所有方法来让 kendo-gird 在 Angular 环境中进行刷新，而不必导致页面刷新：

我的控制器中有以下代码：

$scope.$on('import-grid-loaded', function (event, args) {
            alert('hello');
            portabilityService.portList($
                $scope.importGridOptions = {
                    dataSource:
                        {
                            data: new kendo.data.ObservableArray($scope.portDetails),
                            pageSize: 10
                        },
                    sortable: {
                        mode: "multiple",
                        allowUnsort: true
                    },
                    pageable: {
                        refresh: true
                    },
                    dataBound: function () {
                        this.expandRow(this.tbody.find("tr.k-master-row").first());
                    },

                    detailTemplate: $('#Details').html(),

                    columns: [
                         {
                             field: "FileName",
                             title: "File Name",
                             width: "120px"
                         },
                         {
                             field: "RequestedByUseraname",
                             title: "Imported By",
                             width: "120px"
                         },

                          {
                              field: "CreatedOn",
                              title: "Imported On",
                              width: "120px",
                              type: "date",
                              format: "{0:dd MMM yyyy} at {0:h:mm tt }"
                          },
                        {
                            field: "StateString",
                            title: "State",
                            width: "120px",
                            encoded: true,
                            template: '#=GetFaClass(data.StateString)#'
                        }
                    ]
                };

            });
        });

我的 HTML 看起来像

<div id="importGrid"ng-if="portDetails" class="row table-condensed table-frame grid" kendo-grid k-options={{importGridOptions}} k-rebind={{portDetails}}></div>

1. 此代码确保 $scope.PortDetails 在第一次加载之前确实存在
2. 在第一次加载时也成功加载了网格
3. 现在，我希望在更新 Portdetails 时刷新网格。这就是为什么我广播一个事件，以便它在我的控制器中重新运行上面的代码，我希望它会重新绑定网格。但什么也没发生

我也尝试过其他方式，比如 JQuery

$('#importGrid').data('kendoGrid').dataSource.data(data);
    $('#importGrid').data('kendoGrid').dataSource.read();
    $('#importGrid').data('kendoGrid').refresh();

这也行不通。更新数据源后，有什么简单的方法可以在 Angular 中刷新剑道网格？

Answer 1

刷新网格并没有错。我认为您创建数据的方式是错误的。当您根据数据数组将 dataSource 的数据设置为新的 ObservableArray 时，您会创建它的副本，就像快照一样，因此它不会再更改。如果要更改网格的数据，则必须直接在数据源的数据中进行更改。所以$scope.portDetails 中的更改不会生效，这可能是您正在做的事情，依靠$scope.portDetails 获取数据。

在this demo你有两个网格，第二个像你的一样初始化，第一个是我认为你必须做的：

dataSource: {
    transport: {
        read: function(options) {
             options.success(new kendo.data.ObservableArray($scope.portDetails));
        }
    }
}

请注意，当您添加并刷新第一个网格时，它会接收新数据，但第二个网格不会。上面的代码将确保每次 dataSource 读取新数据时，它总是会创建一个当前状态为 $scope.portDetails 的新 ObservableArray。