如何刷新AngularJs剑道网格

How to refresh AngularJs Kendo Grid?

本文关键字:AngularJs 网格 刷新 何刷新      更新时间:2023-09-26

我正在尝试刷新angular js剑道网格,但没有适合我的解决方案。我尝试了论坛中建议的大多数解决方案。

这是我的HTML代码

<tab heading="Transactions (Exception)" data-ng-controller="ExceptionSearchResultsController as exceptionSearchResults" data-ng-show="exceptionSearchResults.hasResults">
    <div class="panel panel-default">
    <div id="exceptionSearchResultsGrid" data-kendo-grid ="exceptionSearchResults" data-k-options="exceptionSearchResults.gridOptions" data-show-no-results data-show-active-filters data-k-rebind="exceptionSearchResults.gridOptions"></div>
    </div>
</tab>

这是我的控制器代码

function initDataWatch() {
            $scope.$watch(function () {
                return exceptionDataService.reportData();
            }, function (newValue) {
                viewModel.dataRecords = newValue.records || [];
                viewModel.gridOptions = {
                    dataSource: new kendo.data.DataSource({
                        data: viewModel.dataRecords,
                        pageSize: 15,
                        sort: { field: "dateCreated", dir: "asc" }
                    }),
                    pageable: {
                        pageSizes: [15, 50, 100],
                        pageSize: 15,
                        input: true
                    },
                    height: 575,
                    columns: viewModel.columns,
                    columnMenu: true,
                    reorderable: true,
                    filterable: true,
                    resizable: true,
                    sortable: true,
                    groupable: true,
                    navigatable: true
                };
            }, true);
        }

viewModel.dataRecords来自服务调用,我可以在日志中看到数据。

看起来您需要访问网格的数据源,并在数据更改后设置一个新的数据源。

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-setDataSource

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-提取

尝试重新加载网格。

$("#kgrid").data("kendoGrid").dataSource.read();

DEMO