It is a common requirement for any project to display data in a tabular format. The easiest way to do this is by using HTML tables, but soon this gets complex, you need a way to support sorting (single & multi columns), resizable columns, inline editing, filtering, pagination (client-side and server-side) and so on. There is a way to bind data to a HTML Table in AngularJs, but when it comes to sorting, paging, editing and dragging the columns, the grid choice is useful. ng-grid is Angular's native implementation of the Grid. There are many plugins from third-parties that can be integrated into AngularUI Pages, but ng-grid exists inside the AngularJs framework and is very rich in functionality and compatibility.

Let us create a sample ng-grid and understand how ng-grid works.

Example-1

  1. <!DOCTYPE html>
  2. <html ng-app="myApp">
  3. <head>
  4. <title>NG Grid Demo</title>
  5. <>
  6. .gridStyle
  7. {
  8. border: 5px solid #d4d4d4;
  9. width: 400px;
  10. height: 200px;
  11. }
  12. </style>
  13. <link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
  14. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  15. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
  16. <script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
  17. <script type="text/javascript">
  18. var app = angular.module('myApp', ['ngGrid']);
  19. app.controller('MyCtrl', function ($scope) {
  20. $scope.Data = [{ Name: "Sachin", Skill: "ASP.NET" ,location:"Delhi"},
  21. { Name: "Ramesh", Skill: "C#.NET, VB", location: "Chenai" },
  22. { Name: "Pradeep", Skill: "ASP.NET MVC", location: "Bangalore" },
  23. { Name: "Manas", Skill: "SQL Server", location: "Chenai" },
  24. { Name: "Sachin", Skill: "ASP.NET", location: "Bangalore" }, ];
  25. $scope.gridOptions = { data: 'Data' };
  26. });
  27. </script>
  28. </head>
  29. <body ng-controller="MyCtrl">
  30. <div>
  31. <labl><b> Sample Demo to NG Grid</b></labl>
  32. </div>
  33. <div class="gridStyle" ng-grid="gridOptions"></div>
  34. </body>
  35. </html>

Output

There are four steps to show a sample grid, if we observe the preceding code.

Passed "ngGrid" as dependency to the module

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

Assign some data to scope

  1. [{Name: "Sachin", Skill: "ASP.NET" ,location:"Delhi"},];

Set the data of the scope to gridOptions as

  1. $scope.gridOptions = {data: ‘Data’};

It is like assigning a datasource to nggrid, similar to Gridview1.datasource=dataset in ASP.NET.

Bind the data to the page

  1. <div class="gridStyle" ng-grid="gridOptions"></div>

It is like binding data to a GridView, similar to Gridview1.dataBind() in ASP.NET.

Don't forget to add the scripts and styles needed for ng-grid in the head section of the code.

Let us create a DB and Bind data to ng-grid by web API calls.

Example-2

Step 1

Let us create an Employee Table.

Step 2

We will create a web API that will return the employee data.

  1. public class EmployeeAPIController : ApiController
  2. {
  3. private EmployeeEntities db = new EmployeeEntities();
  5. public IEnumerable<Employee> GetEmployees()
  6. {
  7. return db.Employees.AsEnumerable();
  8. }
  9. }

Step 3

Add module service controller and html code.

Module

  1. var app;
  2. (function () {
  3. app = angular.module("EmployeeModule", ['ngGrid']);
  4. })();

Service

  1. app.service('EmployeeService', function ($http) {
  3. this.getAllEmployee = function () {
  4. return $http.get("/api/EmployeeAPI");
  5. }
  6. });

Controller

  1. app.controller('EmployeeController', function ($scope, EmployeeService) {
  3. GetAllRecords();
  4. function GetAllRecords() {
  5. var promiseGet = EmployeeService.getAllEmployee();
  6. promiseGet.then(function (pl) { $scope.Employees = pl.data, $scope.Data=pl.data },
  7. function (errorPl) {
  8. $log.error('Some Error in Getting Records.', errorPl);
  9. });
  10. }
  11. $scope.gridOptions = { data: 'Data' };
  12. });

Index.html

  1. <html data-ng-app="EmployeeModule">
  2. <head>
  3. <style type="text/css">
  4. .gridStyle
  5. {
  6. border: 5px solid #d4d4d4;
  7. width: 1000px;
  8. height: 200px;
  9. }
  10. </style>
  11. </head>
  12. <body data-ng-controller="EmployeeController">
  14. <div class="gridStyle" ng-grid="gridOptions"></div>
  15. </body>
  16. </html>
  17. <script src="~/Scripts/angular.js"></script>
  18. <script src="~/Scripts/EmployeeScripts/Module.js"></script>
  19. <script src="~/Scripts/EmployeeScripts/Service.js"></script>
  20. <script src="~/Scripts/EmployeeScripts/Controller.js"></script>
  21. <link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
  22. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  23. <script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>

Output


Now, we have seen data from the database and binding to an ng-grid. Let us see now what the features are in ng-grid to make it more useful. We will do a sample ng-grid binding, editing, paging, sorting and grouping the records.

Example-3

  1. <!DOCTYPE html>
  2. <html ng-app="myApp">
  4. <head>
  5. <meta charset="utf-8" />
  6. <title>Working With NG-Grid </title>
  8. <style type="text/css">
  9. .gridStyle
  10. {
  11. border: 1px solid rgb(212, 212, 212);
  12. width: 800px;
  13. height: 370px;
  14. margin-left: 50px;
  15. color: coral;
  16. }
  17. .red {
  18. background-color: green;
  19. color: red;
  20. }
  21. </style>
  22. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
  23. <link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
  24. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  25. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
  26. <script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
  27. <script>
  28. var app = angular.module('myApp', ['ngGrid']);
  29. app.controller(
  30. 'MyCtrl',
  31. function ($scope) {
  32. var Company;
  33. var Model;
  34. var Price;
  35. var Stocks;
  36. var x;
  37. $scope.submit = function () {
  38. Company = $scope.Company;
  39. Model = $scope.Model;
  40. Price = $scope.Price;
  41. Stocks = $scope.Stocks;
  42. $scope.myData.push({
  43. Company: Company,
  44. Model: Model,
  45. Price: Price,
  46. Stocks: Stocks
  47. });
  48. };
  50. $scope.myData = [{ "Company": "Samsung", "Model": "Samsung Galaxy Grand 2", "Price": 5000, "Stocks": 4 },
  51. { "Company": "Samsung", "Model": "Samsung Galaxy S3 Neo", "Price": 9000, "Stocks": 41 },
  52. { "Company": "Samsung", "Model": "Samsung Galaxy Grand Max", "Price": 11000, "Stocks": 4 },
  53. { "Company": "MicroMax", "Model": "Micromax Canvas Blaze", "Price": 6300, "Stocks": 0 },
  54. { "Company": "MicroMax", "Model": "Micromax Canvas Duddle", "Price": 11000, "Stocks": 3 },
  55. { "Company": "MicroMax", "Model": "Micromax Canvas Duddle- SPL", "Price": 11000, "Stocks": 3 },
  56. { "Company": "Blackberry", "Model": "Blackberry Z30", "Price": 19000, "Stocks": 10 },
  57. { "Company": "Blackberry", "Model": "Micromax bold 9780", "Price": 12900, "Stocks": 20 },
  59. ],
  62. $scope.gridOptions = {
  64. data: 'myData',
  65. pagingOptions: $scope.pagingOptions,
  66. enablePinning: true,
  67. enablePaging: true,
  68. showFooter: true,
  69. enableColumnResize: true,
  70. enableCellSelection: true,
  71. columnDefs: [
  72. {
  73. field: "Company",
  74. width: 180,
  75. pinned: true,
  76. enableCellEdit: true
  77. },
  78. {
  79. field: "Model",
  80. width: 200,
  81. enableCellEdit: true
  82. },
  83. {
  84. field: "Price",
  85. width: 100,
  86. enableCellEdit: true
  87. },
  88. {
  89. field: "Stocks",
  90. width: 120,
  91. enableCellEdit: true,
  92. cellTemplate: basicCellTemplate
  93. },
  94. {
  95. field: "Action",
  96. width: 200,
  97. enableCellEdit: false,
  98. cellTemplate: '<button id="editBtn" type="button" class="btn btn-xs btn-info" ng-click="updateCell()" >Click a Cell for Edit </button>'
  99. }]
  101. };
  103. $scope.selectedCell;
  104. $scope.selectedRow;
  105. $scope.selectedColumn;
  107. $scope.editCell = function (row, cell, column) {
  108. $scope.selectedCell = cell;
  109. $scope.selectedRow = row;
  110. $scope.selectedColumn = column;
  111. };
  113. $scope.updateCell = function () {
  115. // alert("checking");
  116. $scope.selectedRow[$scope.selectedColumn] = $scope.selectedCell;
  117. };
  119. var basicCellTemplate = '<div class="ngCellText" ng-class="col.colIndex()" ng-click="editCell(row.entity, row.getProperty(col.field), col.field)"><span class="ui-disableSelection hover">{{row.getProperty(col.field)}}</span></div>';
  121. $scope.filterOptions = {
  122. filterText: "",
  123. useExternalFilter: true
  124. };
  126. $scope.gridOptions.sortInfo = {
  127. fields: ['Company', 'Price'],
  128. directions: ['asc'],
  129. columns: [0, 1]
  130. };
  132. $scope.totalServerItems = 0;
  134. $scope.pagingOptions = {
  135. pageSizes: [5, 10, 20],
  136. pageSize: 5,
  137. currentPage: 1
  138. };
  140. $scope.changeGroupBy = function (group1, group2) {
  141. $scope.gridOptions.$gridScope.configGroups = [];
  142. $scope.gridOptions.$gridScope.configGroups.push(group1);
  143. $scope.gridOptions.$gridScope.configGroups.push(group2);
  144. $scope.gridOptions.groupBy();
  145. }
  146. $scope.clearGroupBy = function () {
  147. $scope.gridOptions.$gridScope.configGroups = [];
  148. $scope.gridOptions.groupBy();
  149. }
  151. });
  152. </script>
  153. </head>
  154. <body ng-controller="MyCtrl">
  155. <div class="panel panel-danger">
  156. <div class="panel-heading"></div>
  157. <div class="panel-body">
  158. <form class="input" ng-submit="submit()" role="form">
  159. <div style="border: 2px solid gray;width:600px;" >
  160. <labl> <b> Add a New Model: NG GRID DEMO </b></labl>
  161. <div class="form-group">
  162. <label"><b>Company:</b></label>
  163. <input id="inputs" class="form-control" type="text" ng-model="Company">
  164. </div>
  165. <div class="form-group">
  166. <label><b>Model :</b></label>
  167. <input id="Number1" class="form-control" type="text" ng-model="Model">
  168. </div>
  169. <div class="form-group">
  170. <label>Price</label>
  171. <input id="Date1" class="form-control" type="number" ng-model="Price">
  172. </div>
  173. <div class="form-group">
  174. <label>Stocks</label>
  175. <input id="Number2" class="form-control" type="number" ng-model="Stocks">
  176. </div>
  178. <div class="form-group">
  179. <input
  180. type="submit" value="submit" id="but" class="btn btn-success">
  181. <button type="button" ng-click="changeGroupBy('Company','Price')">Company By Name and Price</button>
  182. <button type="button" ng-click="clearGroupBy()">Clear Group</button>
  183. </div>
  184. </div>
  185. </form>
  186. </div>
  187. </div>
  188. <div class="panel panel-danger">
  189. <div class="panel-heading"><b><p style="padding-left:50px;">Model and Stocks Information</p></b></div>
  190. <div style="width: 500px;">
  191. <div class="gridStyle" ng-grid="gridOptions"></div>
  192. </div>
  193. </div>
  194. </body>
  196. </html>

Output

When doing a grouping, the screen arranges the grouping by Name and Price.

Code Explanation

Added data to scope

  1. $scope.myData = [{ "Company": "Samsung", "Model": "Samsung Galaxy Grand 2", "Price": 5000, "Stocks": 4 },
  2. { "Company": "Samsung", "Model": "Samsung Galaxy S3 Neo", "Price": 9000, "Stocks": 41 },
  3. { "Company": "Samsung", "Model": "Samsung Galaxy Grand Max", "Price": 11000, "Stocks": 4 },
  4. { "Company": "MicroMax", "Model": "Micromax Canvas Blaze", "Price": 6300, "Stocks": 0 },
  5. { "Company": "MicroMax", "Model": "Micromax Canvas Duddle", "Price": 11000, "Stocks": 3 },
  6. { "Company": "MicroMax", "Model": "Micromax Canvas Duddle- SPL", "Price": 11000, "Stocks": 3 },
  7. { "Company": "Blackberry", "Model": "Blackberry Z30", "Price": 19000, "Stocks": 10 },
  8. { "Company": "Blackberry", "Model": "Micromax bold 9780", "Price": 12900, "Stocks": 20 },
  10. ],

We can add a different property to ng-grid, such as paging, sorting, pinning of columns we need to display, enable scrolling and controlling a cell property value such as styling and events.

  1. $scope.gridOptions = {
  3. data: 'myData',
  4. pagingOptions: $scope.pagingOptions,
  5. enablePinning: true,
  6. enablePaging: true,
  7. showFooter: true,
  8. enableColumnResize: true,
  9. enableCellSelection: true,
  10. columnDefs: [
  11. {
  12. field: "Company",
  13. width: 180,
  14. pinned: true,
  15. enableCellEdit: true
  16. },
  17. {
  18. field: "Model",
  19. width: 200,
  20. enableCellEdit: true
  21. },
  22. {
  23. field: "Price",
  24. width: 100,
  25. enableCellEdit: true
  26. },
  27. {
  28. field: "Stocks",
  29. width: 120,
  30. enableCellEdit: true,
  31. cellTemplate: basicCellTemplate
  32. },
  33. {
  34. field: "Action",
  35. width: 200,
  36. enableCellEdit: false,
  37. cellTemplate: '<button id="editBtn" type="button" class="btn btn-xs btn-info" ng-click="updateCell()" >Click a Cell for Edit </button>'
  38. }]
  40. };

Added the cell edit code on scope

  1. var basicCellTemplate = '<div class="ngCellText" ng-class="col.colIndex()" ng-click="editCell(row.entity, row.getProperty(col.field), col.field)"><span class="ui-disableSelection hover">{{row.getProperty(col.field)}}</span></div>';

Added the grouping code on scope and calling it on click of “CompanyByName and Price” button.

  1. $scope.changeGroupBy = function (group1, group2) {
  3. $scope.gridOptions.$gridScope.configGroups = [];
  5. $scope.gridOptions.$gridScope.configGroups.push(group1);
  7. $scope.gridOptions.$gridScope.configGroups.push(group2);
  9. $scope.gridOptions.groupBy();
  11. }

This is all about the basics of ng-grid. I hope you have understood what ng-grid is and how to use it. Thanks for reading.