+91-90427 10472
mariatrainingacademy@gmail.com
         
Dot net training in Chennai -Maria Academy

Grid view using Angular JS

05 Apr 2017

Document by Ganesanva@hotmail.com – + 919042710472

Create AngularGrid.html as shown below in windows explorer.

Put the below code in AngularGrid.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>
</head>
<body ng-controller=”MyCtrl”>
<div class=”gridStyle” ng-grid=”gridOptions”>
</div>
</body>
</html>

Create main.js and put the below code,

var app = angular.module(‘myApp’, [‘ngGrid’]);
app.controller(‘MyCtrl’, function($scope) {
$scope.myData = [{EmployeeName: “Sam”, age: 22},
{EmployeeName: “google”, age: 24},
{EmployeeName: “Yahoo”, age: 28},
{EmployeeName: “Bing”, age: 27},
{EmployeeName: “Ram”, age: 26 },
{EmployeeName: “Ganesan”, age: 25},
{EmployeeName: “Raj”, age: 22},
];
$scope.gridOptions = { data: ‘myData’ };
});

Create style.css and Put below code,

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

Download the files ng-grid.min.css,ng-grid-2.0.11.min.js at the end of blog and put it on the same path.
In order to make this code dynamic, we have to give a dynamic JSON value from Database in myData.
Output:

Click here to download the solution,
https://1drv.ms/u/s!ArddhCoxftkQg9dAzVE1LuxbhTk6Aw

Social tagging: > > > > > >

Maria academy

Recent Posts

Categories