Give the kendo data source the value of the angular variable

Question

I'm currently trying to populate the kendo grid with deleted data. Kendo has its own function for retrieving data, but I want to use the angular factory I created.

So, I have a factory that has a getSkills function. This function gets all 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 learned skills into 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" } ] }; 

In most cases, the ajax callback is slower than initializing the kendo grid. Then it will show an empty table, since the table data is not bound to the variable angular $ scope.skills.

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

Any help would be appreciated!

Answer 1

I found a slightly simpler solution: In my case, $ scope.regs defines data that is updated from the server's REST service using the Angular $ resource opened with the "AppService". This service is defined as:

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

• I set k-auto-bind = "false" to the 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> 

• Instead of binding the Kendo grid data source using the "data" property, I used a "transport" with a "read" defined as a function, something like this:

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

• Then, when I want to update the data in the grid, I use the callback using Angular $ resource.

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

It works. An additional advantage of this solution is that you do not need to move the grid creation to Java Script, it can remain in HTML.

Answer 2

Something like this will get you back on the right track. You can simply call your factory using the transport method. You simply cannot mix and match them, either you all read, create and destroy the methods that the factory should use, or they should all explicitly call the endpoint, i.e. url: '/ api / myservice /' Instead of using $ http just consumes your factory, as elsewhere in your application:

 $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 3

I fixed it as follows:

I gave my resource function a callback as follows:

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

In the createGrid function (data); I initialize the data as follows:

  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 initialization data attribute, I set the data when it is successfully loaded. Hope this helps!

Answer 4

Have you seen the $ q promises in Angular? See $ q promises in Angular