AngularJS UI Grid Sorting Filtering Paging Grouping Example

AngularJS UI Grid Sorting Filtering Paging Grouping Example

what is AngularJS UI Grid?

AngularJS UI Grid Sorting Filtering Paging Grouping Example The ui-grid API simple in angularjs consists all of the core level ui.grid system means smart table documentation, plus officeal documentation for each of list the features that we can choose to add ,create,edit or remove to the grid system. Now add or simple create ui.grid system module new reference in angularjs simple application while new add remove or editable defining module like as shown list of futures following

There are the Following List of features available in UI Grid means Smart tabel using AngularJS.
#: Column Sorting datagrid either asc or desc or none
#: Column Filtering in grid system
#: Bind complex in grid system functionalities to all the tabel cell values
#: Ability to editable smart change header tag and cell all the content with custom tables templates
#: Grouping based smart tabel
#: Expandable all the Rows

READ :  Include common header and footer using Vuejs - router-view

Example

Include ui.grid Modules using AngularJS

var liveApp = angular.module("liveApp", ["ui.grid"]);

AngularJS UI Grid Example

 


<title>
Developed By Pakainfo.com : Angularjs UI-Grid Example
</title>




var liveApp = angular.module("liveApp", ["ui.grid"]);
liveApp.controller("uigridCtrl", function ($scope) {
$scope.clients = [
{ clientname: "Rani Sai", clientage: 14, address: 'gondal' },
{ clientname: "dhansukh Kakadiya", clientage: 25, address: 'Bhavanagar' },
{ clientname: "sejal Alavala", clientage: 35, address: 'Bhavanagar' },
{ clientname: "karasan Kumar", clientage: 25, address: 'Bangalore' },
{ clientname: "praiks valera", clientage: 27, address: 'diwan' }
];
});


.liveGriddata {
width: 625px;
height: 225px;
}



<h2>Developed By Pakainfo.com : AngularJS UI Grid Example</h2>
<div>
<div class="liveGriddata"></div>
</div>


 

Syntax of AngularJS UI Grid Sorting

$scope.gridOptions = {
enableSorting: true,
columnDefs: [
{ field: 'clientname' },
{ field: 'clientage' },
{ field: 'address', enableSorting: false }
]
};

Example

AngularJS UI Grid Sorting Example


<title>
Developed By Pakainfo.com : Angularjs UI-Grid Sorting Example
</title>




var liveApp = angular.module("liveApp", ["ui.grid"]);
liveApp.controller("liveCtrl", function ($scope) {
$scope.gridOptions = {
enableSorting: true,
columnDefs: [
{ field: 'clientname' },
{ field: 'clientage' },
{ field: 'address', enableSorting: false }
],
onRegisterApi: function (gridApi) {
$scope.mytableApi = gridApi;
}
};
$scope.clients = [
{ clientname: "Rani Sai", clientage: 14, address: 'gondal' },
{ clientname: "dhansukh Kakadiya", clientage: 25, address: 'Bhavanagar' },
{ clientname: "sejal Alavala", clientage: 35, address: 'Bhavanagar' },
{ clientname: "karasan Kumar", clientage: 25, address: 'Bangalore' },
{ clientname: "praiks valera", clientage: 27, address: 'diwan' }
];
$scope.gridOptions.data = $scope.clients;
});


.liveGriddata {
width: 625px;
height: 240px;
}



<h2>Developed By Pakainfo.com : AngularJS UI Grid Sorting Example</h2>
<div>
<div class="liveGriddata"></div>
</div>


 

AngularJS UI Grid Filtering Example


<title>
Developed By Pakainfo.com : Angularjs UI-Grid Filtering Example
</title>




var liveApp = angular.module("myliveApp", ["ui.grid"]);
liveApp.controller("liveCtrl", function ($scope) {
$scope.gridOptions = {
enableFiltering: true,
columnDefs: [
{ field: 'clientname' },
{ field: 'clientage' },
{ field: 'address', enableFiltering: false }
],
onRegisterApi: function (gridApi) {
$scope.mytableApi = gridApi;
}
};
$scope.clients = [
{ clientname: "Rani Sai", clientage: 14, address: 'gondal' },
{ clientname: "dhansukh Kakadiya", clientage: 25, address: 'Bhavanagar' },
{ clientname: "sejal Alavala", clientage: 35, address: 'Bhavanagar' },
{ clientname: "karasan Kumar", clientage: 25, address: 'Bangalore' },
{ clientname: "praiks valera", clientage: 27, address: 'diwan' }
];
$scope.gridOptions.data = $scope.clients;
});


.liveGriddata {
width: 625px;
height: 240px;
}



<h2>Developed By Pakainfo.com AngularJS UI Grid Fitering Example</h2>
<div>
<div class="liveGriddata"></div>
</div>


 

AngularJS UI Grid Paging / Pagination Example


<title>
Developed By Pakainfo.com Angularjs UI-Grid Paging Example
</title>




var liveApp = angular.module("myliveApp", ["ui.grid", "ui.grid.pagination"]);
liveApp.controller("liveCtrl", function ($scope) {
$scope.gridOptions = {
paginationPageSizes: [25, 50, 75],
paginationPageSize: 5,
columnDefs: [
{ field: 'clientname' },
{ field: 'clientage' },
{ field: 'address' }
],
onRegisterApi: function (gridApi) {
$scope.mytableApi = gridApi;
}
};
$scope.clients = [
{ clientname: "Rani Sai", clientage: 14, address: 'gondal' },
{ clientname: "dhansukh Kakadiya", clientage: 25, address: 'Bhavanagar' },
{ clientname: "sejal Alavala", clientage: 35, address: 'Bhavanagar' },
{ clientname: "karasan Kumar", clientage: 25, address: 'Bangalore' },
{ clientname: "praiks valera", clientage: 27, address: 'diwan' },
{ clientname: "Siva Prasad", clientage: 38, address: 'gondal' },
{ clientname: "Sudheer Rayana", clientage: 25, address: 'Kakinada' },
{ clientname: "Honey Yemineni", clientage: 7, address: 'gondal' },
{ clientname: "Mahendra Kakadiya", clientage: 22, address: 'Vijayawada' },
{ clientname: "Mahesh Kakadiya", clientage: 23, address: 'California' },
{ clientname: "Nagaraju Kakadiya", clientage: 34, address: 'Atlanta' },
{ clientname: "Gopi Krishna", clientage: 35, address: 'Repalle' },
{ clientname: "Sudheer Uppala", clientage: 21, address: 'Guntur' },
{ clientname: "Sushmita", clientage: 27, address: 'diwan' }
];
$scope.gridOptions.data = $scope.clients;
});


.liveGriddata {
width: 625px;
height: 240px;
}



<h2>Developed By Pakainfo.com : - AngularJS UI Grid Paging Example</h2>
<div>
<div></div>
</div>


Example

READ :  AngularJS Session Storage ngStorage
https://pakainfo.com/

Add a Comment

Your email address will not be published. Required fields are marked *