Having problems using KendoUI grid with AngularJS

Question

I'm evaluating KendoUI for use within my Angular applications. I'm having issues with using KendoUI Gird widget: I specify the data source to be a JSON array defined in my controller, but I got absolutely nothing on the page, not even an empty grid.

Here is my html:

Here is my controller:

'use strict';

angular.module('wizardApp').controller('ApplicationGeneralWizardCtrl', ['$scope',
    function ($scope) {
            console.log('Entering ApplicationGeneralWizardCtrl');
         $scope.dataSource = new kendo.data.DataSource({
            data: [
                { id: 1, name: 'Tennis Balls', department: 'Sports', lastShipment: '10/01/2013' },
                { id: 2, name: 'Basket Balls', department: 'Sports', lastShipment: '10/02/2013' },
                { id: 3, name: 'Oil', department: 'Auto', lastShipment: '10/01/2013' },
                { id: 4, name: 'Filters', department: 'Auto', lastShipment: '10/01/2013' },
                { id: 5, name: 'Dresser', department: 'Home Furnishings', lastShipment: '10/01/2013' }

            ],
             columns:
                 [
                     { "field": "name", "title": "Name"},
                     { "field": "department", "title": "Department"},
                     { "field": "lastShipment", "title": "Last Shipment" }
                 ]
         });

    }
]);

Here is my main app.js:

'use strict';

var app = angular.module('wizardApp', [
  'ngCookies',
  'ngResource',
  'ngSanitize',
  'ngRoute',
  'mgo-angular-wizard',
    'ngGrid',
    'kendo.directives'
]);

app.value('host', false /*use local host*/ ? "http://localhost:63428" : "http://sampleservice.breezejs.com");

app.controller('ApplicationTableCtrl', ['$scope', '$location', '$rootScope','ngGrid',
    function ($scope, $location, $rootScope) {

    }
]);

app.controller('MainCtrl',
    ['$scope',  'datacontext','$timeout','WizardHandler','$location',
        function($scope, datacontext, $timeout,WizardHandler,$location) {

            function Customer(name,number,address,contact)
            {
                this.customerName = name;
                this.customerNumber = number;
                this.customerAddress = address;
                this.customerContact = contact;
            }

            console.log('created MainCtrl');
            $scope.items = [];
//            $scope.logList = logger.logList;
//            $scope.lastLog = function(){return logger.lastLog;};

            $scope.step_1_Action = function(name,number){
                 console.log('MainCtrl : step_1_Action dataInput:  ' + name + '  ' + number);

                $scope.currentCustomer = new Customer('','','','');
                 $scope.currentCustomer.customerName = name;
                 $scope.currentCustomer.customerNumber = number;
                    }
            $scope.step_2_Action = function(address,contact){
                console.log('MainCtrl : step_2_Action dataInput:  ' + address + '   ' + contact);
                $scope.currentCustomer.customerAddress = address;
                $scope.currentCustomer.customerContact = contact;
                    }
            $scope.saveCustomerRecord = function(){
                 datacontext.addCustomer($scope.currentCustomer);
                 datacontext.commit();
                $scope.currentCustomer = new Customer('','','','');
                 //$scope.step1Form.$setPristine();
                 $scope.currentCustomer = {};
                 WizardHandler.wizard().goTo(0);
            }


        }]

);

app
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
        .when('/IntroductionWizard', {
            templateUrl: 'views/Wizards/IntroductionWizard/IntroductionWizard.html',
            controller: 'IntroductionWizardCtrl'
        })
        .when('/ApplicationGeneralWizard', {
            templateUrl: 'views/Wizards/ApplicationGeneralWizard/ApplicationGeneralWizard.html',
            controller: 'ApplicationGeneralWizardCtrl'
        })
      .otherwise({
        redirectTo: '/'
      });
  }).run(
    function ($rootScope, $location) {
        $rootScope.go = function (path) {
            $location.path(path);
        }
    });

Here is my index.html:

What am I doing wrong, and what is the right 'Angular-Kendo' way to do it?

Alex Choroshin · Accepted Answer

Basically your did good, the only thing i can think of is the use of new kendo.data.DataSource({}), you don't need to create a new instance since you're already using the Kendo ui directive that creates it for you (although using this code as is also works), another thing is the fact that we sometimes forget properly adding the third-party library to angular.

function ctrl($scope){
         $scope.dataSource = {
            data: [
                { id: 1, name: 'Tennis Balls', department: 'Sports', lastShipment: '10/01/2013' },
                { id: 2, name: 'Basket Balls', department: 'Sports', lastShipment: '10/02/2013' },
                { id: 3, name: 'Oil', department: 'Auto', lastShipment: '10/01/2013' },
                { id: 4, name: 'Filters', department: 'Auto', lastShipment: '10/01/2013' },
                { id: 5, name: 'Dresser', department: 'Home Furnishings', lastShipment: '10/01/2013' }

            ],
             columns:
                 [
                     { "field": "name", "title": "Name"},
                     { "field": "department", "title": "Department"},
                     { "field": "lastShipment", "title": "Last Shipment" }
                 ]
         };
}

Live example: http://jsfiddle.net/choroshin/Ysxa6/2/

Having problems using KendoUI grid with AngularJS

Answers (1)

Related Questions