a blog for those who code

Tuesday 7 April 2015

Angular Grid - Advanced Data Grid for AngularJS

In this post we will be going through Advanced Data Grid for Angular JS i.e. Angular Grid. Angular Grid is the first high performance and feature rich data grid for Angular JS which is light weight with no external dependencies. The best part of Angular Grid is except Angular JS there no other dependencies.

PC : http://www.angulargrid.com/index.html

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 :
Demo : http://www.angulargrid.com/example.html

Please Like and Share the Blog, if you find it interesting and helpful.

No comments:

Post a Comment