Angular + Kendo
HTML
<link rel="stylesheet" href="//cdn.kendostatic.com/2014.1.416/styles/kendo.common.min.css">
<link rel="stylesheet" href="//cdn.kendostatic.com/2014.1.416/styles/kendo.bootstrap.min.css">
<script src="//cdn.kendostatic.com/2014.1.416/js/kendo.all.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.min.js"></script>
<script src="http://kendo-labs.github.io/angular-kendo/angular-kendo.js"></script>
<div ng-controller="GridController">
<div kendo-grid k-options="options" k-data-source="sData"></div>
</div>
CSS
.k-header
{
background-color: #FFFFFF;
border-style: none;
}
.k-grid-header{
border-width: 1px;
border-style: none;
border-color: #F2F2F2;
text-align: center;
}
.k-grid table {
border-style: none;
border-spacing: 1px 10px;
}
.k-grid td{
border-width: 0px;
background-color: #F2F2F2;
text-align: center;
}
JavaScript
angular.module('angular-kendo-example', ['kendo.directives']);
function GridController($scope) {
$scope.options = {
sortable: true,
pageable: true,
navigatable: true,
selectable: true,
columns: [{
field: "column1",
title: "column 1",
width: "40px"
},{
field: "column2",
title: "column 2",
width: "70px"
},{
field: "column3",
title: "column 3",
width: "70px"
},{
field: "column4",
title: "column 4",
width: "60px"
},{
field: "column5",
title: "column 5",
width: "40px"
},{
field: "column6",
title: "column 6",
width: "40px"
}],
};
$scope.sData= [
{ column1: "column1 data", column2: "column2 data", column3: "column3 data", column4: "column4 data", column5: "column5 data", column6: "column6 data" }, { column1: "column1 data", column2: "column2 data", column3: "column3 data", column4: "column4 data", column5: "column5 data", column6: "column6 data" }, { column1: "column1 data", column2: "column2 data", column3: "column3 data", column4: "column4 data", column5: "column5 data", column6: "column6 data" }
];
}