Give kendo datasource an angular scope variable

Question

I'm currently trying to fill a kendo grid with remote data. Kendo has its own function to fetch the data, but I want to use the angular factory which I created.

So I have a factory, which has a function "getSkills". This function obtains all the skill objects from my api.

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

In my SkillController in angular, I put these fetched skills in a scope variable.

$scope.skills = SkillFactory.getSkills();

I initialize the Kendo grid here:

$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" }
                ]
            };

Most of the times, the ajax callback is slower than the initialization of the kendo grid. Then it will show an empty table, because the data of the table isn't bound to the angular $scope.skills variable.

I have searched everywhere, but I can't figure out how I can use a custom function for the data attribute in the initialization, or how to bind the scope variable to the table.

Any help would be appreciated!

Answer 1

I found a little simpler solution: In my case $scope.regs defines the data which is updated from server REST service using Angular $resource exposed with "AppService". This service is defined as:

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

    registrationServices.factory('AppService', ['$resource',
        function($resource) {
            return $resource('rest/registrations');
    }]);

1. I set k-auto-bind = "false" to grid definition in 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. Instead of binding Kendo grid datasource using "data" property, I used "transport" with "read" defined as function, something like that:

     $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. Then, when I want to refresh data in the grid, I use callback using Angular $resource. :

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

It works. Additional advantage of this solution is, you don't have to move grid creation to Java Script code, it can stay in HTML.