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

我正在使用Angular Kendo UI项目将Telerik Kendo网格与Angular相结合。如何使用角度Kendo UI刷新网格数据源

我有以下标记：

<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元素似乎有点不对。

来源

2014-02-11 David Kethel

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

<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

来源

2014-07-31 21:31:02 micjamking

我不得不用“$ scope.grid。 dataSource.read（）;” – trevorc

很好的答案，但不幸的是，如果你改变dataSource和columns，这是行不通的。 KendoUi-Grid不支持在创建窗口小部件后定义列 - 如下所述：http://kendo-labs.github.io/angular-kendo/#/grid-widget。任何想法如何实现？可能你必须去另一条路线，从而重新加载子模板... –

我也可以证实这一点。我不得不使用$ scope.grid.dataSource.read（）。我正在使用2015.3.930库。 – Halcyon

-1

所以我最近也很困惑。

它的关键在于调用Datasource对象上的.read（）函数。不幸的是，我只发现了如何从一个jQuery风格呼叫这样做：

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

现在的一切，ID选择“#theGrid”将取决于你实现你的包含分区是什么Id'd as。令人困惑的是，.data（“kendo-grid”）位在Angular指令中被硬编码，并且无论您的实现如何，都是相同的。

我知道你不应该在Angular中执行Dom操作，但需要延迟加载复杂的Kendo网格，这需要一些角魔法/黑客攻击。我创建了一个“刷新网格”功能，可以对基于承诺的流程进行控制，以便在网格实例化之后刷新网格。这里有一个例子实现的是：

#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服务每100ms运行一次，最多10次迭代。如果在这些迭代中的任何一个中，找到dom元素，则调用stopRefreshLoop方法。

就黑客而言，我认为这是黑客的“更优雅”一面。

来源

2014-07-01 21:52:35

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

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

则可以调用

$scope.thingsOptions.dataSource.read();

来源

2014-12-25 15:40:11 Yakub

这是一个比接受的更好的答案，给予了更多的控制权。 – Immortal

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

回答

相关问题