Monday 12 June 2017

AngularJS UI Grid (Sorting, Filtering, Paging, Grouping)



UI Grid formerly known as ng-grid which is purely built on angularjs library and it covered all core grid features like sorting, paging, filtering, exporting, etc.

Following are the features available in UI Grid.

  1. Column Sorting either asc or desc or none
  2. Column Filtering
  3. Bind complex functionalities to cell values
  4. Ability to change header and cell content with custom templates
  5. Grouping
  6. Expandable Rows
Steps to use UI-Grid in AngualrJS
Following are the steps to use ui-grid in angularjs applications.

First create new application and open page and add following angularjs reference file in header section.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
Now add the following ui-grid css and script files in header section of your page
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
Now add ui.grid module reference in angularjs application while defining module like as shown following
var app = angular.module("uigridApp", ["ui.grid"]);
In JavaScript file define array of object like as shown below to render data with ui-grid
$scope.users = [
{ name: "Suresh Dasari", age: 30, location: 'Chennai' },
.
.
.
{ name: "Rohini Alavala", age: 29, location: 'Chennai' }
];

Add following css style to your application to define ui grid dimensions
<style type="text/css">
.myGrid {
width: 500px;
height: 200px;
}
</style>

In html code we need to define ui-grid directive and specify JSON object to render data with ui-grid like as shown following
<div ng-controller="uigridCtrl">
<div ui-grid="{ data: users }" class="myGrid"></div>
</div>

This is how we can use ui grid in our angularjs applications to render data in table formats.

AngularJS UI Grid Example

Following is the example of showing data in table format using ui grid in angularjs applications.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Angularjs UI-Grid Example
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<script type="text/javascript">
var app = angular.module("uigridApp", ["ui.grid"]);
app.controller("uigridCtrl", function ($scope) {
$scope.users = [
{ name: "Shivdatta", age: 10, location: 'Tarapur' },
{ name: "Anand Upadhyay ", age: 30, location: 'Noida' },
{ name: "Munish Sharma", age: 29, location: 'Gurgaon' },
{ name: "Praveen Kumar", age: 25, location: 'Bangalore' },
{ name: "Sateesh Chandra", age: 27, location: 'Vizag' }
];
});
</script>
<style type="text/css">
.myGrid {
width: 500px;
height: 200px;
}
</style>
</head>
<body ng-app="uigridApp">
<h2>AngularJS UI Grid Example</h2>
<div ng-controller="uigridCtrl">
<div ui-grid="{ data: users }" class="myGrid"></div>
</div>
</body>
</html>


AngularJS UI Grid Sorting

In angularjs by using ui grid we can implement or remove sorting functionality for columns based on our requirement with few lines of code.

Syntax of AngularJS UI Grid Sorting

Following is the syntax of implementing sorting functionality for columns in angularjs ui grid.

$scope.gridOptions = {
enableSorting: true,
columnDefs: [
{ field: 'name' },
{ field: 'age' },
{ field: 'location', enableSorting: false }
]
};
If you observe above code, we enabled sorting feature by setting property enableSorting: true and disabling sorting feature for particular columns by setting property enableSorting: false based on our requirement.


AngularJS UI Grid Sorting Example

Following is the example of using sorting feature in angularjs ui grid.

 Live Preview
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Angularjs UI-Grid Sorting Example
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<script type="text/javascript">
var app = angular.module("uigridApp", ["ui.grid"]);
app.controller("uigridCtrl", function ($scope) {
$scope.gridOptions = {
enableSorting: true,
columnDefs: [
{ field: 'name' },
{ field: 'age' },
{ field: 'location', enableSorting: false }
],
onRegisterApi: function (gridApi) {
$scope.grid1Api = gridApi;
}
};
$scope.users = [
{ name: "Madhav Sai", age: 10, location: 'Nagpur' },
{ name: "Suresh Dasari", age: 30, location: 'Chennai' },
{ name: "Rohini Alavala", age: 29, location: 'Chennai' },
{ name: "Praveen Kumar", age: 25, location: 'Bangalore' },
{ name: "Sateesh Chandra", age: 27, location: 'Vizag' }
];
$scope.gridOptions.data = $scope.users;
});
</script>
<style type="text/css">
.myGrid {
width: 500px;
height: 230px;
}
</style>
</head>
<body ng-app="uigridApp">
<h2>AngularJS UI Grid Sorting Example</h2>
<div ng-controller="uigridCtrl">
<div ui-grid="gridOptions" class="myGrid"></div>
</div>
</body>
</html>



AngularJS UI Grid Filtering

If we use UI Grid in angularjs applications, we can implement filtering functionality easily with few configurations.

Syntax of AngularJS UI Grid Filtering

Following is the syntax of implementing filter / search functionality for columns in angularjs ui grid.

$scope.gridOptions = {
enableFiltering: true,
columnDefs: [
{ field: 'name' },
{ field: 'age' },
{ field: 'location', enableFiltering: false }
],
onRegisterApi: function (gridApi) {
$scope.grid1Api = gridApi;
}
};
If you observe above code, we enabled filtering feature by setting property enableFiltering: true and disabled filtering feature for particular columns by setting property enableFiltering: false based on our requirement.

AngularJS UI Grid Filtering Example

Following is the example of implementing filtering feature using angularjs ui grid.

 Live Preview
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Angularjs UI-Grid Filtering Example
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<script type="text/javascript">
var app = angular.module("uigridApp", ["ui.grid"]);
app.controller("uigridCtrl", function ($scope) {
$scope.gridOptions = {
enableFiltering: true,
columnDefs: [
{ field: 'name' },
{ field: 'age' },
{ field: 'location', enableFiltering: false }
],
onRegisterApi: function (gridApi) {
$scope.grid1Api = gridApi;
}
};
$scope.users = [
{ name: "Madhav Sai", age: 10, location: 'Nagpur' },
{ name: "Suresh Dasari", age: 30, location: 'Chennai' },
{ name: "Rohini Alavala", age: 29, location: 'Chennai' },
{ name: "Praveen Kumar", age: 25, location: 'Bangalore' },
{ name: "Sateesh Chandra", age: 27, location: 'Vizag' }
];
$scope.gridOptions.data = $scope.users;
});
</script>
<style type="text/css">
.myGrid {
width: 500px;
height: 230px;
}
</style>
</head>
<body ng-app="uigridApp">
<h2>AngularJS UI Grid Fitering Example</h2>
<div ng-controller="uigridCtrl">
<div ui-grid="gridOptions" class="myGrid"></div>
</div>
</body>
</html>
If you observe above example, we enabled filtering feature with enableFiltering: true property and disabled filtering feature for “location” column.


AngularJS UI Grid Paging / Pagination

In angularjs UI Grid we can implement paging / pagination easily with few lines of code.

Syntax of AngularJS UI Grid with Paging

Following is the syntax of implementing pagination for ui grid

var app = angular.module("uigridApp", ["ui.grid", "ui.grid.pagination"]);
app.controller("uigridCtrl", function ($scope) {
$scope.gridOptions = {
paginationPageSizes: [25, 50, 75],
paginationPageSize: 5,
columnDefs: [
{ field: 'name' },
{ field: 'age' },
{ field: 'location' }
]
};
});
<div ng-controller="uigridCtrl">
<div ui-grid="gridOptions" ui-grid-paginationclass="myGrid"></div>
</div>
As mentioned in above code we need add “ui.grid.pagination” reference to angular module and need  to define pagination size.

AngularJS UI Grid Paging / Pagination Example

Following is the example of implementing paging to UI Grid in angularjs application.

 Live Preview
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Angularjs UI-Grid Paging Example
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<script type="text/javascript">
var app = angular.module("uigridApp", ["ui.grid", "ui.grid.pagination"]);
app.controller("uigridCtrl", function ($scope) {
$scope.gridOptions = {
paginationPageSizes: [25, 50, 75],
paginationPageSize: 5,
columnDefs: [
{ field: 'name' },
{ field: 'age' },
{ field: 'location' }
],
onRegisterApi: function (gridApi) {
$scope.grid1Api = gridApi;
}
};
$scope.users = [
{ name: "Madhav Sai", age: 10, location: 'Nagpur' },
{ name: "Suresh Dasari", age: 30, location: 'Chennai' },
{ name: "Rohini Alavala", age: 29, location: 'Chennai' },
{ name: "Praveen Kumar", age: 25, location: 'Bangalore' },
{ name: "Sateesh Chandra", age: 27, location: 'Vizag' },
{ name: "Siva Prasad", age: 38, location: 'Nagpur' },
{ name: "Sudheer Rayana", age: 25, location: 'Kakinada' },
{ name: "Honey Yemineni", age: 7, location: 'Nagpur' },
{ name: "Mahendra Dasari", age: 22, location: 'Vijayawada' },
{ name: "Mahesh Dasari", age: 23, location: 'California' },
{ name: "Nagaraju Dasari", age: 34, location: 'Atlanta' },
{ name: "Gopi Krishna", age: 29, location: 'Repalle' },
{ name: "Sudheer Uppala", age: 19, location: 'Guntur' },
{ name: "Sushmita", age: 27, location: 'Vizag' }
];
$scope.gridOptions.data = $scope.users;
});
</script>
<style type="text/css">
.myGrid {
width: 500px;
height: 230px;
}
</style>
</head>
<body ng-app="uigridApp">
<h2>AngularJS UI Grid Paging Example</h2>
<div ng-controller="uigridCtrl">
<div ui-grid="gridOptions" ui-grid-paginationclass="myGrid"></div>
</div>
</body>
</html>
Now we will run and see the output of above example.


Posted by at No comments:
Labels:
Subscribe to: Posts (Atom)