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 AngularJS 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.
To use AngularJS, you have to include it in your page before the closing
<body> tag. Google's CDN is recommended for a faster load time:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
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.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>Working With NG-Grid </title>
<style type="text/css">
.gridStyle
{
border: 1px solid rgb(212, 212, 212);
width: 800px;
height: 370px;
margin-left: 50px;
color: coral;
}
.red {
background-color: green;
color: red;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<script>
var app = angular.module('myApp', ['ngGrid']);
app.controller(
'MyCtrl',
function ($scope) {
var Company;
var Model;
var Price;
var Stocks;
var x;
$scope.submit = function () {
Company = $scope.Company;
Model = $scope.Model;
Price = $scope.Price;
Stocks = $scope.Stocks;
$scope.myData.push({
Company: Company,
Model: Model,
Price: Price,
Stocks: Stocks
});
};
$scope.myData = [{ "Company": "Samsung", "Model": "Samsung Galaxy Grand 2", "Price": 5000, "Stocks": 4 },
{ "Company": "Samsung", "Model": "Samsung Galaxy S3 Neo", "Price": 9000, "Stocks": 41 },
{ "Company": "Samsung", "Model": "Samsung Galaxy Grand Max", "Price": 11000, "Stocks": 4 },
{ "Company": "MicroMax", "Model": "Micromax Canvas Blaze", "Price": 6300, "Stocks": 0 },
{ "Company": "MicroMax", "Model": "Micromax Canvas Duddle", "Price": 11000, "Stocks": 3 },
{ "Company": "MicroMax", "Model": "Micromax Canvas Duddle- SPL", "Price": 11000, "Stocks": 3 },
{ "Company": "Blackberry", "Model": "Blackberry Z30", "Price": 19000, "Stocks": 10 },
{ "Company": "Blackberry", "Model": "Micromax bold 9780", "Price": 12900, "Stocks": 20 },
],
$scope.gridOptions = {
data: 'myData',
pagingOptions: $scope.pagingOptions,
enablePinning: true,
enablePaging: true,
showFooter: true,
enableColumnResize: true,
enableCellSelection: true,
columnDefs: [
{
field: "Company",
width: 180,
pinned: true,
enableCellEdit: true
},
{
field: "Model",
width: 200,
enableCellEdit: true
},
{
field: "Price",
width: 100,
enableCellEdit: true
},
{
field: "Stocks",
width: 120,
enableCellEdit: true,
cellTemplate: basicCellTemplate
},
{
field: "Action",
width: 200,
enableCellEdit: false,
cellTemplate: '<button id="editBtn" type="button" class="btn btn-xs btn-info" ng-click="updateCell()" >Click a Cell for Edit </button>'
}]
};
$scope.selectedCell;
$scope.selectedRow;
$scope.selectedColumn;
$scope.editCell = function (row, cell, column) {
$scope.selectedCell = cell;
$scope.selectedRow = row;
$scope.selectedColumn = column;
};
$scope.updateCell = function () {
// alert("checking");
$scope.selectedRow[$scope.selectedColumn] = $scope.selectedCell;
};
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>';
$scope.filterOptions = {
filterText: "",
useExternalFilter: true
};
$scope.gridOptions.sortInfo = {
fields: ['Company', 'Price'],
directions: ['asc'],
columns: [0, 1]
};
$scope.totalServerItems = 0;
$scope.pagingOptions = {
pageSizes: [5, 10, 20],
pageSize: 5,
currentPage: 1
};
$scope.changeGroupBy = function (group1, group2) {
$scope.gridOptions.$gridScope.configGroups = [];
$scope.gridOptions.$gridScope.configGroups.push(group1);
$scope.gridOptions.$gridScope.configGroups.push(group2);
$scope.gridOptions.groupBy();
}
$scope.clearGroupBy = function () {
$scope.gridOptions.$gridScope.configGroups = [];
$scope.gridOptions.groupBy();
}
});
</script>
</head>
<body ng-controller="MyCtrl">
<div class="panel panel-danger">
<div class="panel-heading"></div>
<div class="panel-body">
<form class="input" ng-submit="submit()" role="form">
<div style="border: 2px solid gray;width:600px;" >
<labl> <b> Add a New Model: NG GRID DEMO </b></labl>
<div class="form-group">
<label"><b>Company:</b></label>
<input id="inputs" class="form-control" type="text" ng-model="Company">
</div>
<div class="form-group">
<label><b>Model :</b></label>
<input id="Number1" class="form-control" type="text" ng-model="Model">
</div>
<div class="form-group">
<label>Price</label>
<input id="Date1" class="form-control" type="number" ng-model="Price">
</div>
<div class="form-group">
<label>Stocks</label>
<input id="Number2" class="form-control" type="number" ng-model="Stocks">
</div>
<div class="form-group">
<input
type="submit" value="submit" id="but" class="btn btn-success">
<button type="button" ng-click="changeGroupBy('Company','Price')">Company By Name and Price</button>
<button type="button" ng-click="clearGroupBy()">Clear Group</button>
</div>
</div>
</form>
</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading"><b><p style="padding-left:50px;">Model and Stocks Information</p></b></div>
<div style="width: 500px;">
<div class="gridStyle" ng-grid="gridOptions"></div>
</div>
</div>
</body>
</html>
Output of above code as follows
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.
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.
Comments
Post a Comment