C#.NET, ADO.NET, ASP.NET, JavaScript, JQuery, AngularJS

ng-grid in AngularJS

In this article i am going to explain how to use ng-grid in AngularJS , ng-grid example in AngularJS.

Before using ng-grid in AngularJS you have to add the following references.

1.JQuery
2.AngularJS
3.ngGrid's javascript files
4.ngGrid css files

you can download the above references from this link: angular ngGrid

Consider you have the following HTML code

<html ng-app="myApp">
<head>
<title>My ngGrid Demo</title>
<link rel="stylesheet" type="text/css" href="ng-grid.css" />
<link rel="stylesheet" type="text/css" href="myAppstyle.css" />
<script type="text/javascript" src="jquery-1.8.2.js"></script>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="ng-grid-1.3.2.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="MyngGridCtrl">
<div class="ngGridStyle" ng-grid="myGrid">
</div>
</body>
</html>

now add some styles to grid-add following css to your myAppstyle.css

.ngGridStyle {
border: 1px solid black;
width: 200px;
height: 400px
}

Now add the following code to your app.js file

var myAppRoot = angular.module('myApp', ['ngGrid']);

myAppRoot.controller('MyngGridCtrl', function($scope) {

//define some object here
$scope.myData=[{ ID:1, Name:'John',Country:'USA'},
{ID:2, Name:'Sachin' , Country:'India'},
{ ID:3, Name:'Smith' , Country:'UK'} ];

//now add the above object to your ngGrid
$scope.myGrid={data:'myData'};
});

Now when you run your code you will see the data in Grid.

To hide specific columns in ng-grid read: hide columns in ng-grid AngularJS

For more articles on AngularJS refer: angularJS

Note: To understand this post please read our AngularJS Tutorial 1

In our previous tutorial we saw how to get data from model. We have written code in our javascript file. But what if we could have all this work done without writing code? What if we could just declare which parts of the UI map to which JavaScript properties and have them sync automatically? This way of programming is called data binding.

In this tutorial i am using the same example as in previous tutorial and just making it dynamic. In the previous example the HelloController sets the model Message.text once and it never changes. To make it live, lets change the previous example by adding a textbox. Using that textbox we can change the value of Message.text when the user types sometihng in the textbox.

<html ng-app>
<head runat="server">
<title>AngularJS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
</head>
<body>
<div>
<input ng-model='name' />
<p> Hai, {{name}} World!! </p>
</div>
</body>
</html>

Now run this code and type some name in textbox, you can see the text changes accordingly. In this way we can dynamically update the view using AngularJS's DataBinding.