How to render the data in Kendo-Grid using angularjs

Question

I am trying to combine angular with kendo ui, here i want to render the data in simple kendo grid. but i could not reach it out. The following is sample code snippet, Please tell me what might be the wrong?

    <!DOCTYPE html>
<html ng-app="Sample">
<head>
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="https://rawgithub.com/kendo-labs/angular-kendo/master/build/angular-kendo.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>  
  <div ng-controller="SampleController">    
    <div>Products: {{products.length}}</div>
    <div kendo-grid k-data-source="products" k-selectable="'row'"
    k-pageable='{ "pageSize": 2, "refresh": true, "pageSizes": true }'
      k-columns='[
        { "field": "id", "title": "Id"},
        { "field": "name", "title": "Name"},
        { "field": "department", "title": "Department"},
        { "field": "lastShipment", "title": "Last Shipment" }
      ]'>
    </div>
  </div>
  <script>
 var app = angular.module('Sample', ['kendo.directives']);
 app.controller('SampleController', ['$scope', function ($scope) {
   $scope.products = [
        { 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' }
    ];
}]);
  </script>
</body>
</html>

JDTLH9 · Accepted Answer · 2014-10-21 15:27:39Z

2

angular-kendo is deprecated and you should now use kendo-ui-core https://github.com/telerik/kendo-ui-core/. The AngularJS bindings are now part of this project.

It looks as though the online refernces to the kendo libraries no longer work as a result. I put this in a plunkr and could not get it to work either. Matthieu is wrong, your angularjs app is working fine.

I would suggest trying to find a working example from the link above. They have documentation on the GitHub site.

answered Oct 21, 2014 at 15:27

JDTLH9

1,7751 gold badge23 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mathieu Bertin · Accepted Answer · 2014-10-21 15:56:36Z

0

you have to declare your controller in your app

Replace your function SampleController by

app.controller('SampleController', ['$scope', function ($scope) {
   $scope.products = [
        { 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' }
    ];
}];

Kendo is now integrating directly angular so go HERE and follow the example, You should use a higher version of angular JS something like 1.2.X

I also did a Plunker Link to Plunker

edited Oct 21, 2014 at 15:56

answered Oct 21, 2014 at 14:43

Mathieu Bertin

1,62411 silver badges11 bronze badges

1 Comment

majji Over a year ago

can you please tell me, how to remove default generated table header from the above code

Collectives™ on Stack Overflow

How to render the data in Kendo-Grid using angularjs

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related