This is a migrated thread and some comments may be shown as answers.

Kendo and AngularJS integration not working

3 Answers 222 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Rohan
Top achievements
Rank 1
Rohan asked on 06 Sep 2015, 03:22 AM
(function () {
    'use strict';
    angular
        .module('prestart.services', []);
}());
 
(function () {
    'use strict';
    angular.module('prestart', [
        'prestart.core',
        'prestart.services',
        'prestart.home'
 
    ]);
}());
 
(function () {
    'use strict';
    angular
        .module('prestart')
        .config(function ($stateProvider, $urlRouterProvider, $compileProvider) {
 
            $compileProvider.debugInfoEnabled(false);
            $urlRouterProvider.otherwise('/');
 
            $stateProvider
                .state('home', {
                    url: '/home',
                    cache: false,
                    controller: 'PrestartCtrl as prestart',
                    templateUrl: 'www/src/home/prestart.html'
                })
 
 
        });
}());
 
(function () {
  'use strict';
  angular
    .module('prestart')
    .run(function($rootScope, $state){
        $state.go('home');
    });
}());
 
(function () {
    'use strict';
    angular
        .module('prestart.home')
        .controller('PrestartCtrl', PrestartCtrl);
 
    PrestartCtrl.$inject = ['$scope', 'dataLoaderService'];
 
    function PrestartCtrl($scope, $dataLoaderService) {
        var vm = this;
        vm.title = "Test title"
        vm.equipments = $dataLoaderService.loadPrestartData();
        return vm
    }
}());
 
(function () {
    'use strict';
    angular
        .module('prestart.services')
        .factory('dataLoaderService', dataLoaderService);
 
 
    function dataLoaderService() {
 
        return {
            loadPrestartData: loadPrestartData
        };
 
        // Implementation -----
 
        function loadPrestartData() {
            return [
                {
                    Description: 'Blah',
                    Category: 'Blah'    
                },
                {
                    Description: 'Blah 1',
                    Category: 'Blah 1'
                }
            ];
        }
    }
}());

 

Index.html

<body ng-app="prestart">
 <div ui-view></div>
</body>​

prestart.html

<kendo-mobile-list-view class="item-list" k-data-source="prestart.equipments">
   <div k-template>
       {{dataItem.Description}}
   </div>
</kendo-mobile-list-view>

The out is printed as [Object Object]. If I build kendo datasource for vm.equipments output is blank :(

 Any help appreciated.

3 Answers, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 08 Sep 2015, 08:10 AM

Hello Rohan,

 

the approach you have taken seems correct. A simplified version of it works as expected here. Can you extend that example further, so that we may observe the problem on our side? Thank you in advance. 

 

Regards,
Petyo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Rohan
Top achievements
Rank 1
answered on 08 Sep 2015, 08:27 AM

Hi Peyto,

As per my findings this code does not work for 

http://kendo.cdn.telerik.com/2015.2.902/js/kendo.all.min.js

When I use https://kendo.cdn.telerik.com/2015.2.805/js/kendo.all.min.js  everything works fine.

 

Cheers

0
Petyo
Telerik team
answered on 09 Sep 2015, 08:14 AM

Hello Rohan,

 

this seems interesting, but again, I could not reproduce it in the dojo. See an updated version of the previous one, linked against 902. Please let me know the additional setup is necessary in order to reproduce the problem on our side. 

 

Regards,
Petyo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
General Discussions
Asked by
Rohan
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Rohan
Top achievements
Rank 1
Share this question
or