Getting Started With Angular Grid
When we usually create our Angular Mdoule, we should include AngularGrid as a dependency of our module like
var module = angular.module("demoGrid", ["angularGrid"]);
Basic Example
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
//Download the latest version of angulargrid
<script src="angularGrid-latest.js"></script>
</head>
<body ng-app="demoGrid" ng-controller="demoGridCtrl">
<div angular-grid="gridOptions" class="ag-fresh"></div>
</body>
</html>
<script type="text/javascript">
var module = angular.module("demoGrid", ["angularGrid"]);
module.controller("demoGridCtrl", function($scope) {
var columnDefs = [
{displayName: "First Name", field: "fname"},
{displayName: "Last Name", field: "lname"},
{displayName: "Age", field: "age"},
{displayName: "Country", field: "country"}
];
var rowData = [
{fname: "Hello", lname: "Angular", age: "01", country: "World"},
{fname: "Hemant", lname: "Joshi", age: "25", country: "India"},
{fname: "Daniel", lname: "Skeet", age: "40", country: "Iran"},
{fname: "Rose", lname: "Taylor", age: "29", country: "London"},
{fname: "Brij", lname: "Bhushan", age: "24", country: "India"}
];
$scope.gridOptions = {
columnDefs: columnDefs,
rowData: rowData,
dontUseScrolls: true, // since the data is less
enableSorting: true, // to enable sorting
};
});
</script>
Result :
Please Like and Share the Blog, if you find it interesting and helpful.
No comments:
Post a Comment