Дайте источнику данных кендо переменную угловой области

В настоящее время я пытаюсь заполнить сетку кендо удаленными данными. У кендо есть собственная функция для получения данных, но я хочу использовать созданную мной фабрику angular.

Итак, у меня есть фабрика, в которой есть функция «getSkills». Эта функция получает все объекты навыков из моего API.

angular.module('MyApp').factory('Factory', function ($resource) {
    return $resource('/api/v1/skills/', {  },
        {
            getSkills: { method: 'GET', isArray: true }
        });
});    

В моем SkillController в angular я помещаю эти выбранные навыки в переменную области видимости.

$scope.skills = SkillFactory.getSkills();

Я инициализирую сетку Кендо здесь:

$scope.gridOptions = {
                dataSource: {
                    data: $scope.skills,
                    schema: {
                        model: {
                            fields: {
                                ID: { type: "number" },
                                Name: { type: "string" },
                                CreatedBy: { type: "number" },
                                CreatedDate: { type: "string" },
                                EditedBy: { type: "number" },
                                EditedDate: { type: "string" },
                                InUse: { type: "boolean" }
                            }
                        }
                    },
                    pageSize: 20
                },
                scrollable: true,
                sortable: true,
                filterable: true,
                pageable: {
                    input: true,
                    numeric: false
                },
                selectable: true,
                columns: [
                    { field: "Name", title: "skillname", width: "130px" }
                ]
            };

В большинстве случаев обратный вызов ajax выполняется медленнее, чем инициализация сетки кендо. Затем он покажет пустую таблицу, потому что данные таблицы не привязаны к угловой переменной $scope.skills.

Я искал везде, но я не могу понять, как я могу использовать пользовательскую функцию для атрибута данных при инициализации или как связать переменную области видимости с таблицей.

Любая помощь будет оценена по достоинству!


person Jason van der Zeeuw    schedule 10.10.2013    source источник


Ответы (4)


Я нашел немного более простое решение: в моем случае $scope.regs определяет данные, которые обновляются из службы REST сервера с использованием Angular $resource, предоставляемого с помощью «AppService». Эта услуга определяется как:

    var registrationServices = angular.module('registrationServices', ['ngResource']);

    registrationServices.factory('AppService', ['$resource',
        function($resource) {
            return $resource('rest/registrations');
    }]);
  1. Я установил k-auto-bind = "false" для определения сетки в HTML:

    <div id="form-item">
     <label for="appId" class="info">AppId:</label>
     <input id="appId" ng-model="searchAppId"> 
     <button id="search" class="k-button" ng-click="doSearch()" >Search</button>
    </div>  
    
    <div kendo-grid  k-data-source="registrations" k-selectable="'row'"
      k-pageable='{ "refresh": true, "pageSizes": true }'
      k-columns="registrationsColumns"
      k-sortable="true" k-groupable="true" k-filterable="true"
      k-on-change="selectedItem = data"
      k-auto-bind="false" >
    </div>
    
  2. Вместо привязки источника данных сетки Kendo с использованием свойства «данные» я использовал «транспорт» с «чтением», определенным как функция, что-то вроде этого:

      $scope.regs;
    
     $scope.registrations = new kendo.data.DataSource({
        transport: {
            read: function(options) {
                options.success($scope.regs);
            }
        },
        schema: {
            model: {
                fields: {
                    registrationId: {type: "number"},
                    clientFullName: {type: "string"},
                    registrationDate2: {type: "number"},
                    registrationDate: {type: "date"}
                }
            }
        },
        pageSize: 5,
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true
    });
    
    
    $scope.registrationsColumns = [{"field": "registrationId", "title": "Id"},
        {"field": "clientFullName", "title": "Name"},
        {"field": "registrationDate",
            "title": "Registration Date",
            format: "{0:dd/MM/yyyy}",
            filterable: {ui: dateFilter, extra: "false"}
        }
    ];
        ....
    
  3. Затем, когда я хочу обновить данные в сетке, я использую обратный вызов, используя Angular $resource. :

    $scope.doSearch = function() {
        $scope.regs = AppService.query({"regId": $scope.searchAppId}, function(result) {
            $scope.registrations.read();
        });
    };
    

Оно работает. Дополнительным преимуществом этого решения является то, что вам не нужно переносить создание сетки в код Java Script, она может оставаться в HTML.

person Pawel Piwowar    schedule 17.12.2013
comment
Я знаю, что этот пост устарел, но я заметил, что для serverPaging установлено значение True. Как вы передаете данные пейджинга сетки Kendo вместе с вашим запросом или они передаются в теле запроса? Я пытаюсь сделать это сам, но продолжаю пейджинг работать - person samneric; 20.10.2015

Что-то вроде этого приведет вас на правильный путь. Вы можете просто вызвать свою фабрику из метода чтения транспорта. Вы просто не можете смешивать и сопоставлять их: либо все ваши методы чтения, создания и уничтожения должны использовать фабрику, либо все они должны явно вызывать конечную точку, т.е. URL: '/api/myservice/' Вместо использования $http просто используйте свою фабрику, как и в любом другом месте в своем приложении:

$scope.Source = new kendo.data.DataSource({

    transport: {

        read: function (options) {

            return $http.post('/api/getReportData/', {sDate: '', eDate: ''})
                .success(function (data) {

                    options.success(data);
                    Toaster.Info("Refreshed");

                })
                .error(function () {
                    return;
                });

            console.log("mmm");
        }

    }

});
person pehaada    schedule 05.08.2014
comment
Да, это очень похоже на то, как я закончил это делать! Спасибо! - person Jason van der Zeeuw; 06.08.2014

Я исправил это, выполнив следующие действия:

Я дал моей ресурсной функции обратный вызов следующим образом:

SkillFactory.getSkills({},
    function success(data) {
        createGrid(data);
    });

В функции createGrid(data); Я инициализирую данные следующим образом:

 function createGrid(gridData) {
$("#skillGrid").kendoGrid({
   dataSource: {
   data: gridData,
   schema: {
      model: {
        fields: {
              ID: { type: "number" },
              Name: { type: "string" },
              CreatedBy: { type: "number" },
              CreatedDate: { type: "string" },
              EditedBy: { type: "number" },
              EditedDate: { type: "string" },
              InUse: { type: "boolean" }
                }
             }
          },
       pageSize: 20
       },

Поэтому в атрибуте данных инициализации я устанавливаю данные, когда они успешно получены. Надеюсь, это поможет!

person Jason van der Zeeuw    schedule 10.10.2013

Вы смотрели на $q обещания в Angular? См. промисы $q в Angular.

person bob.mazzo    schedule 16.07.2014
comment
Это не имеет никакого отношения к вопросу. - person pehaada; 29.07.2014
comment
@pehaada, использование обещания гарантирует, что данные будут извлечены до вызова процедуры рендеринга сетки. - person bob.mazzo; 29.07.2014
comment
Хотя ваше утверждение верно, это не тот ответ, который он ищет. Ваш ответ похож на то, что я сказал, что веб-служба на основе REST поможет вам вернуть данные. - person pehaada; 05.08.2014