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

Have you looked at $q promises in Angular ? See $q promises in Angular

Answer 2

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.

Answer 3

Something like this will get you on the correct path. You can simple call your factory from with in the transport read method. You just can't mix and match them either all of you read,create, and destroy methods have to use a factory or they all have to explicitly call the end point ie url: '/api/myservice/' Instead of using $http just consume your factory like you would in any other place with in your app:

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

    }

});

Answer 4

I fixed this doing the following:

I gave my resource function a callback like this:

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

In the function createGrid(data); I initialize the data like this:

 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
       },

So in the data attribute of the initialization I set the data when it is successfully fetched. I hope this helps!