如何使用角度 Kendo UI 刷新网格数据源答案

【问题标题】：How can I refresh a grid data source using angular Kendo UI如何使用角度 Kendo UI 刷新网格数据源
【发布时间】：2014-03-08 20:10:59
【问题描述】：

我正在使用 Angular Kendo UI 项目将 Telerik Kendo 网格与 Angular 相结合。

我有以下标记：

<div kendo-grid="" k-options="thingsOptions" style="height: 600px;" />

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

    $scope.thingsOptions = {
        dataSource: {
            type: "json",
            transport: {
                read: "/OM/om/getAssets",
                dataType: "json"
            },
            schema: {
                model: {
                    id: "ProductID",
...

这一切都很好，但是我想从我的控制器强制刷新我的网格的数据源。像

 $scope.getTasks = function() {
    $scope.thingsOptions.dataSource.read();
};

这可以通过控制器来完成吗？我总是可以做类似的事情

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

在我的控制器中。但是必须从我的控制器中选择一个 HTML 元素似乎有点不对劲。

【问题讨论】：

标签： angularjs kendo-ui kendo-grid

【解决方案1】：

只需将范围变量传递给指令，然后在控制器内部，您就可以使用该变量来调用您需要的任何小部件方法。

<div kendo-grid="grid" ...></div>

<script>
  ...

  $scope.getTasks = function() {
    // scope.grid is the widget reference
    $scope.grid.refresh();
  }

  ...
</script>

参考：http://blogs.telerik.com/kendoui/posts/14-02-26/a-few-angular-kendo-ui-best-practices

【讨论】：

很好的答案，但不幸的是，如果您更改数据源和列，这将不起作用。 KendoUi-Grid 不支持在创建小部件后定义列 - 如此处所述：kendo-labs.github.io/angular-kendo/#/grid-widget。知道如何实现吗？可能您必须转到另一条路线，从而重新加载子模板...
我也可以确认这一点。我不得不使用 $scope.grid.dataSource.read()。我正在使用 2015.3.930 库。
你必须传入 $scope 才能使用这些方法。
@micjamking 不知何故这不起作用，我用this answer解决了我的问题

【解决方案2】：

您的数据源必须是剑道对象

$scope.thingsOptions = {
        dataSource: new kendo.data.DataSource({
                    type: "json",
                    transport: {
                        read: "/OM/om/getAssets",
                        dataType: "json"
                    },
                    schema: {
                        model: {
                            id: "ProductID",

那么就可以调用

$scope.thingsOptions.dataSource.read();

【讨论】：

与公认的答案相比，这是一个更好的答案，可以更好地控制要做什么。

【解决方案3】：

所以我最近也为此苦苦挣扎。

关键是调用 Datasource 对象上的 .read() 函数。不幸的是，我只是从这样的 jQuery 风格调用中发现了如何做到这一点：

angular.element('#theGrid').data("kendo-grid").dataSource.read();

现在，id 选择器“#theGrid”将取决于您的实现以及您包含的 div 的 ID。令人困惑的是， .data("kendo-grid") 位在 Angular 指令中是硬编码的，无论您的实现如何，都将是相同的。

我知道您不应该在 Angular 中进行 Dom 操作，但需要延迟加载复杂的 Kendo 网格需要一些角度魔法/黑客。我创建了一个“刷新网格”函数，它启用了对 dom 元素的基于承诺的流控制，这样我就可以在网格实例化后刷新网格。这是一个示例实现：

#this is in a service called KendoGridService, so understand the context.
stop: undefined,
    refreshGrid: function() {
    // don't queue another refresh of the grid.
    if (angular.isDefined(KendoGridService.stop)) return;

    var element = angular.element("#kgrid");
        KendoGridService.stop = $interval(function() {
            if(angular.element("#kgrid").data("kendo-grid")){
            KendoGridService.stopRefreshLoop(element);
            }
        }, 100, 10);
    },
    stopRefreshLoop: function(element) {
        if (angular.isDefined(KendoGridService.stop)) {
        angular.element("#kgrid").data("kendo-grid").dataSource.read();
        $interval.cancel(KendoGridService.stop);
        KendoGridService.stop = undefined;
        }
    },

有了这个，您现在可以对您的网格数据进行基本加载，然后在您的（可能是基于承诺的）更新完成后通过调用（在这种情况下）刷新它：

KendoGridService.refreshGrid();

该方法使用 Angular 内置的 $interval 服务每 100 毫秒运行一次，最多迭代 10 次。如果在任何这些迭代中，找到了 dom 元素，则调用 stopRefreshLoop 方法。

就 hacks 而言，我认为它是 hacks 的“更优雅”的一面。

【讨论】：