Question

我正在使用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元素似乎有点不对劲。

Answer 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

Answer 2

您的数据源必须是kendo对象

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

然后可以打电话

$scope.thingsOptions.dataSource.read();

Answer 3

所以我最近也在努力解决这个问题。

键，它接缝是调用Datasource对象上的.read（）函数。不幸的是，我只是从这样的jQuery样式调用中找到了如何做到这一点：

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

现在，id选择器＆＃34; #theGrid＆＃34;将取决于您的实施以及您包含的div是什么ID。令人困惑的是，.data（＆＃34; kendo-grid＆＃34;）位在Angular指令中是硬编码的，无论您的实现如何都是相同的。

我知道你不应该在Angular中进行Dom操作，但是需要懒惰加载一个复杂的Kendo网格需要一些角度魔法/黑客攻击。我创建了一个＆＃34;刷新网格＆＃34;函数，它允许对dom元素进行基于promise的流控制，以便在网格实例化后自动刷新网格。这是一个示例实现：

#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方法。

就黑客而言，我认为它更优雅＆＃34;黑客的一面。

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

3 个答案: