How to bind data to Angular Grid using ng-grid Directive?

NG-Grid is not a part of Angular Bootstrap and needs to be added separately. To install Angular Grid use bower to download the components for ng-grid. In your terminal navigate to your project folder, and type in the following commands.

bower install ng-grid

You should now be able to see the ng-grid folder and the files within the bower_components folder. The next thing is to include the ng-grid JS and CSS files in our index.html.

Please add the following highlighted line in your app/index.html file to include the ng-grid CSS file.

<link rel="stylesheet" href="styles/bootstrap.css">
<link rel="stylesheet" href="bower_components/ng-grid/ng-grid.css">
<link rel="stylesheet" href="styles/main.css">

Add the ng-grid JS file as highlighted

<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="bower_components/ng-grid/ng-grid-2.0.7.min.js"></script>

Next you need to add the ngGrid dependency to your AngularApp, you’ll do this by adding in your app/scripts/app.js file as highlighted.

angular.module(AngularApp, ['ui.bootstrap','ngGrid'])

Now that you have NG-Grid added to your projects, create the routes, controllers, and partials for the subscribers page.

Open up the terminal and run the following command.

yo angular:route subscribers

Once you are done with this, you are all set to start working on your Subscribers view.

Open the app/scripts/controllers/subscribers.js file and create your model as follows:

$scope.subscribers =[];
var names=["Betty","John","Peter","Jaden", "Shannon"];
var loyalty=[3,5,7,8,7];
var joinDate=["3/5/10","5/5/12","5/8/11","11/6/13","10/12/10"];

Delete the awesomeThings model and initialize the subscribers model and create the arrays for names, loyalty and joinDate.

Next create a function that will add push the data into the subscribers model.

$scope.addUsers =function(i){
$scope.subscribers.push({
no:i+1,
name:names[i],
loyalty:loyalty[i],
joinDate:joinDate[i]
});
}

And finally run a for loop that iterates through the array elements and adds them to the model.

for (var i=0;i<5;i++){
$scope.addUsers(i);
}

Now that the model is ready, you need to initialize the NG-Grid, so after the for loop lets initialize the ng-grid as follows:

$scope.gridOptions = {
data: 'subscribers'
};

Your work on the controller is done, let’s open the app/views/subscribers.html partial and add the markup for the Grid.

<h1>Subscribers</h1>
<div class="gridStyles" ng-grid="gridOptions">
</div>

add the height and width properties to the .gridStyles class.

.gridStyles{
width:940px;
height:300px;

To add the Column Definitions open the app/scripts/controllers/subscribers.js file, and add the following code as highlighted below:

$scope.gridOptions = {
data: 'subscribers',
showGroupPanel: true,
jqueryUIDraggable: true,
enableCellSelection: true,
enableRowSelection: false,
enableCellEdit: true,
columnDefs: [
{field:'no', displayName:'No.'},
{field:'name', displayName:'Name'},
{field:'userType', displayName:'Subscription Type'},
{field:'loyalty', displayName:'Loyalty Score'},
{field:'joinDate', displayName:'Date of Joining'}
]
};

For alternating row colors simply over riding the default odd and even row classes by adding the following classes to the app/styles/main.css file.

.ngRow.even {
background: #eaeaff;
}
.ngRow.odd {
background: #eaffea;
}

Updates

Add the ng-grid JS file as highlighted