I am new to angular js and kendo UI. Here is my plunk Plunk
I have a directive and want to bind data to the kendo grid.
Script.js - code for module, controller and directive.
(function(){
angular.module('app', ['kendo.directives']);
angular.module('app').controller('MyCtrl',function($scope){
var data = {
accountlist: [
{accountnumber: '123456', accountname: 'Firm 1'},
{accountnumber: '111111', accountname: 'Firm 2'},
{accountnumber: '1234567', accountname: 'Firm 3'},
{accountnumber: '1234568', accountname: 'Firm 4'},
{accountnumber: '1234569', accountname: 'Firm 5'}
]};
$scope.ds = data;
});
angular.module('app').directive('mydir', function(){
return {
restrict: 'E',
scope:{
ds:'='
},
controller:function($scope){},
templateUrl: 'dir.html',
link: function(scope, element, attrs, fn) {
$('#accountlistgrid').kendoGrid({
dataSource:{
data: scope.ds.accountlist
},
selectable: true,
columns: [
{
field: "accountnumber",
title: "Account"
},
{
field: "accountname",
title: "Firm Name"
}
]
});
}
}});
}());
HTML code:
<head>
<link data-require="kendoUI@*" data-semver="2014.2.716" rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" />
<link data-require="kendoUI@*" data-semver="2014.2.716" rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css" />
<script data-require="jquery@2.1.4" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script data-require="angularjs@1.3.6" data-semver="1.3.6" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.6/angular.min.js"></script>
<script data-require="kendoUI@*" data-semver="2014.2.716" src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div>
<mydir ds='ds'></mydir>
</div>
</body>
Why I am not able to see kendo grid?
