{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 可以哭但决不认输i 的问题《Databinding is not working with kendo grid in angu》','https://www.manongdao.com/q-1137510.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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?
It's most likely a conflict between versions.
You can read about which versions work together here.
For example, it states that the latest major release Kendo UI 2015.3.930 (Q3 2015) supports AngularJS 1.4.0+. Not sure if it's backwards compatible, but you can always try.
If you need Angular 1.3.6 you should otherwise use Kendo UI 2015.2.624 (Q2 2015):
Demo: http://plnkr.co/edit/PfVJjA55kL6l9fEMl8uX?p=preview