Как обновить источник данных сетки с помощью angular Kendo UI

Я комбинирую сетку Telerik Kendo с Angular с помощью проекта 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 из моего контроллера.

Ответ 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

Ответ 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

Так что я недавно тоже боролся с этим.

Ключ, это швы - вызывать функцию .read() на объекте Datasource. К сожалению, я только узнал, как это сделать из вызова стиля jQuery следующим образом:

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

Теперь обо всем этом, селектор id "#theGrid" будет зависеть от вашей реализации и того, что ваш содержащий div id Id. Смутно, бит .data( "кендо-сетка" ) жестко закодирован в директиве Angular и будет таким же, независимо от вашей реализации.

Я знаю, что вы не должны выполнять Dom Manipulation в Angular, но для ленивой загрузки сложной сетки Kendo потребовалось немного Angular magic/hacking. Я создал функцию "refresh grid", которая позволяет управлять потоком данных над 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();

этот метод использует службу $interval, встроенную в Angular, для запуска себя каждые 100 мс, для максимум 10 итераций. IF во время любой из этих итераций, элемент dom найден, вызывается метод stopRefreshLoop.

Что касается взлома, я думаю, что это на "более элегантной" стороне хаков.