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>

此代码确保$ scope.PortDetails在第一次加载之前确实存在
还在第一次加载
现在，我希望在更新Portdetails时刷新网格。这就是为什么我广播一个事件，以便它在我的控制器中重新运行上面的代码，我希望它将重新绑定网格。但没有任何反应

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

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

这也行不通。数据源更新后，有没有简单的方法在Angular中刷新kendo网格？

Answer 1

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

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

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

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

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

1 个答案: