Written by Siddartha Thota on August 29, 2014 in AngularJS > Scripting

How to Create a Grid-view using AngularJs [ng-grid]?


Get our Latest updates delivered to your mailbox!

Its our first article on AngularJS in which we are going to design a basic Grid-view, so I’d like to keep everything straight forward and will try to provide as much explanation as possible in order to make sure that you guys understand everything.

Learning how to create a grid functionality is one of the basic elements that every programmer/coder needs to be aware of. Adding elements like sorting the Grid, adding the Pagination, Searching the elements in the Grid (Filtering), Editing the Grid and many other functionalities are available and it all depends on how we are going to use our Grid?

Designing a Grid is really easy task in AngularJS, we do have a special component developed by official AngularJS team called ng-grid. Using the ng-grid, we can create the Grid functionality in AngularJS very easily.

First thing that every beginner in AngularJS has to remember is to initiate your application with ng-app. So, lets start with our tutorial without wasting much time.

Download Source Code

Create a HTML file (angularapp.html)

<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Getting Started With ngGrid Example</title>
<link rel="stylesheet" type="text/css" href="ng-grid.min.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="ng-grid-2.0.11.min.js"></script>
<script type="text/javascript" src="main.js"></script>
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions">

Now, I’m going to add the css file that you need to define for the size of our grid. You can save that file with the name sytle.css (coz you’ve defined in our HTML file that we’ll be using style.css file.)

.gridStyle {
border: 2px solid rgb(212,212,212);
width: 800px;
height: 400px

Now, this is going to be the controller, where are going to define the data and functionality of our application. Make sure you name it as main.js.

var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
 $scope.myData = [{FullName: "Test1", age: 32, Address: "Address details 1"},
 {FullName: "Test2", age: 33, Address: "Address details 29"},
 {FullName: "Test3", age: 34, Address: "Address details 31"},
 {FullName: "Test4", age: 36, Address: "Address details 33"},
 {FullName: "Test5", age: 31, Address: "Address details 37"},
 {FullName: "Test6", age: 38, Address: "Address details 14"},
 {FullName: "Test7", age: 44, Address: "Address details 19"},
 {FullName: "Test8", age: 56, Address: "Address details 41"},
 {FullName: "Test9", age: 13, Address: "Address details 51"},
 {FullName: "Test10", age: 78, Address: "Address details 15"},
 {FullName: "Test11", age: 35, Address: "Address details 71"},
 {FullName: "Test12", age: 29, Address: "Address details 12"},];
 $scope.gridOptions = { data: 'myData' };

Not to forget, you need to make sure you copy all the required angular directives and pre-defined ng-grid css files onto your folder in order to display the grid. I’ve added the code in the download link above, you can easily download the copy and try it on your system.

Hope you’ve enjoyed our article. If you face any issues with the source code or anything else, leave your comment below, so that we can help your out by debugging the issue.

Output :

Grid View in AngularJS

{ 0 comments… add one now }

Leave a Comment

Previous post:

Next post: