Angular Service as a Kendo DataSource

I have been working a bit with an Angular app that makes heavy use of Kendo controls. I was apprehensive at first but the Angular/Kendo bindings are actually fairly pleasant to use. However, my team ran into a small gotcha regarding binding a Kendo grid to the results of an Angular service method.

Initially we bound the Kendo grid to an ObservableArray property on the controller. However, that broke quite a bit of the grid’s built-in functionality like the loading indicator and refresh button. After a bit of investigation, we settled on a more idiomatic Kendo solution by calling the Angular service in the function as follows:

<!DOCTYPE html>
<html ng-app='demo'>

  <title>Kendo Grid with Angular Service Datasource</title>
  <link href="" rel="stylesheet">
  <link href="" rel="stylesheet">
  <script src=""></script>
  <script src=""></script>
  <script src=""></script>
  <script src=''></script>
  <script type="text/javascript">
    (function() {
      module('demo', ['kendo.directives']).
      controller('demoController', ['demoService', function(demoService) {
        var vm = this;
        vm.getGridOptions = function() {
          return {
            dataSource: {
              type: 'json',
              transport: {
                read: function(options) {
                  then(function(results) {
                  catch(function(error) {
              pageSize: 5,
            sortable: true,
            pageable: true,
            height: 250,
            columns: [{
              field: 'firstName',
              title: 'First Name',
            }, {
              field: 'lastName',
              title: 'Last Name',
            }, ]
      service('demoService', ['$q', '$timeout', function($q, $timeout) {
        return {
          getData: function() {
            // This could be $http or any other promise returning service.
            // Use a deferred and $timeout to simulate a network request.
            var deferred = $q.defer()

            $timeout(function() {
              var fakeResults = _.range(1, 21).map(function(i) {
                return {
                  firstName: 'first name ' + i,
                  lastName: 'last name ' + i,
            }, 2000);

            return deferred.promise;

<body ng-controller='demoController as demo'>
  <div kendo-grid k-options='demo.getGridOptions()'></div>


Demo here (plnkr)

comments powered by Disqus