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

Posted 2023-05-07

【中文标题】有没有办法以角度刷新剑道网格？

【英文标题】：Is there any way to refresh Kendo-grid in angular?

【发布时间】：2017-05-20 17:10:35

【问题描述】：

我已经尝试了所有方法来让 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 中刷新剑道网格？

【参考方案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。