Kendo ui
I was playing around with angular js and directive part is pretty great. Recently I came across KendoUI and they have pretty good integration with AngulasJS.
I am posting a work around I did on grid. Please feel free to share your suggestions.
kendoGrid.html
----------------------
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<script src="lib/kendoui/js/jquery.min.js"></script>
<script src="lib/angular/angular.1.7.js"></script>
<script src="lib/kendoui/js/kendo.all.min.js"></script>
<script src="lib/kendoui/js/angular-kendo.min.js"></script>
<!--//get data fro grid-->
<script src="data/data.js"></script>
<link href="lib/kendoui/styles/kendo.common.min.css" rel="stylesheet"/>
<link href="lib/kendoui/styles/kendo.default.min.css" rel="stylesheet"/>
<script type="text/javascript">
var myApp = angular.module("myApp", ['kendo.directives']);
// controller
function MyController($scope) {
$scope.issues = get_min_Data();
}
</script>
<body ng-controller="MyController">
<div class="k-panelbar">
<h2>Kendo Grid with feaures</h2>
</div>
<div id="example">
<div>
<div style="height: 10px"></div>
</div>
<div>
<table id="grid" kendo-grid k-data-source="issues" k-selectable="'row'"
k-columns='[{ "field": "IssueId", "title": "ID", width: 110},
{ "field": "Description", "title": "Description", width: 200},
{ "field": "Severity", "title": "Severity"},
{ "field": "Type", "title": "Type"},
{ "field": "Status", "title": "Status"}
]'
k-sortable="true" k-filterable="true"
k-pageable='{ "refresh": true, "pageSizes": true }'
k-pageable="5"
k-reorderable="true">
</table>
</div>
</div>
</body>
</html>
data.js
----------
function get_min_Data() {
return [
/* Reduced data set */
{ "IssueId":41, "Description":"Serialize Issue 1", "Severity":"Low", "Type":"Bug", "Status":"Open" },
{ "IssueId":2, "Description":"Serialize Issue 2", "Severity":"High", "Type":"Bug", "Status":"Open" },
{ "IssueId":33, "Description":"Serialize Issue 3", "Severity":"Low", "Type":"Bug", "Status":"Open" } ];
}
Output screen
-----------------
I was playing around with angular js and directive part is pretty great. Recently I came across KendoUI and they have pretty good integration with AngulasJS.
I am posting a work around I did on grid. Please feel free to share your suggestions.
kendoGrid.html
----------------------
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<script src="lib/kendoui/js/jquery.min.js"></script>
<script src="lib/angular/angular.1.7.js"></script>
<script src="lib/kendoui/js/kendo.all.min.js"></script>
<script src="lib/kendoui/js/angular-kendo.min.js"></script>
<!--//get data fro grid-->
<script src="data/data.js"></script>
<link href="lib/kendoui/styles/kendo.common.min.css" rel="stylesheet"/>
<link href="lib/kendoui/styles/kendo.default.min.css" rel="stylesheet"/>
<script type="text/javascript">
var myApp = angular.module("myApp", ['kendo.directives']);
// controller
function MyController($scope) {
$scope.issues = get_min_Data();
}
</script>
<body ng-controller="MyController">
<div class="k-panelbar">
<h2>Kendo Grid with feaures</h2>
</div>
<div id="example">
<div>
<div style="height: 10px"></div>
</div>
<div>
<table id="grid" kendo-grid k-data-source="issues" k-selectable="'row'"
k-columns='[{ "field": "IssueId", "title": "ID", width: 110},
{ "field": "Description", "title": "Description", width: 200},
{ "field": "Severity", "title": "Severity"},
{ "field": "Type", "title": "Type"},
{ "field": "Status", "title": "Status"}
]'
k-sortable="true" k-filterable="true"
k-pageable='{ "refresh": true, "pageSizes": true }'
k-pageable="5"
k-reorderable="true">
</table>
</div>
</div>
</body>
</html>
data.js
----------
function get_min_Data() {
return [
/* Reduced data set */
{ "IssueId":41, "Description":"Serialize Issue 1", "Severity":"Low", "Type":"Bug", "Status":"Open" },
{ "IssueId":2, "Description":"Serialize Issue 2", "Severity":"High", "Type":"Bug", "Status":"Open" },
{ "IssueId":33, "Description":"Serialize Issue 3", "Severity":"Low", "Type":"Bug", "Status":"Open" } ];
}
Output screen
-----------------
No comments:
Post a Comment