I'm using AngularJS ng-grid, where assigning the $scope.gridOptions associated onRegisterApi with function as listed in my code below:
onRegisterApi: function (gridApi) {
alert("in");
$scope.gridApi = gridApi;
gridApi.selection.on.rowSelectionChanged($scope, function (row) {
alert("in");
var msg = 'row selected ' + row.isSelected;
$log.log(msg);
console.log(msg);
//$window.alert(msg);
});
gridApi.selection.on.rowSelectionChangedBatch($scope, function (rows) {
alert("in");
var msg = 'rows changed ' + rows.length;
$log.log(msg);
// $window.alert(msg);
console.log(msg);
});
//Added for custom paging
gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) {
paginationOptions.pageNumber = newPage;
paginationOptions.pageSize = pageSize;
$scope.pageSize = pageSize;
$scope.currentPage = newPage;
$scope.totalPage = Math.ceil($scope.gridOptions.totalItems / $scope.pageSize);
$scope.loadData();
});
//custom sort
$scope.gridApi.core.on.sortChanged($scope, function (grid, sortColumns) {
if (sortColumns.length == 0) {
sortingOptions = null;
} else {
sortingOptions = sortColumns[0].sort.direction;
}
$scope.loadData();
});
}
However, when trigerring gridApi.selection.on.rowSelectionChanged/gridApi.pagination.on.paginationChanged/$scope.gridApi.core.on.sortChanged via clicking on row, changing one of the pagination options such as the pagesize and clicking on sort icon as listed in image ng-grid.PNG, the above mentioned methods are not being called, please advise.
Note: I set the useExternalPagination/useExternalSorting/useExternalFiltering to "true" and enabled the "enableRowSelection: true".
Please advise!!!!
Issue is with the mixture of both ng-grid and ui-grid. Try using any one framework , i suggest ui-grid compare to ng-grid.
since in the HTML , ng-grid used , onRegisterApi is not getting triggered as it is related to ui-grid.
So using ui-grid is fixed onRegisterApi call issue.
and angular version included is not compatible, so i have changed the imports and few ui-grid options of pagination and selection.
Here is the updated demo - http://plnkr.co/edit/1oUIj7IprYoCpYJ6u5OF?p=preview
Please check this docs - http://ui-grid.info/docs/#!/api/ui.grid.pagination.directive:uiGridPagination.
<!doctype html>
<html ng-app="erpApp">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="~/Content/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.8.3/i18n/ui-grid.grouping.min.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div ng-controller="AccountsController">
<div class="gridStyle" ui-grid="gridOptions" ui-grid-selection ui-grid-pagination>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
var app;
app = angular.module('erpApp', ['ui.grid', 'ui.grid.pagination', 'ui.grid.selection']);
app.controller('AccountsController', [
'$scope',
//'$filter',
//'$window',
//'$http',
//'$log',
function ($scope){//, $filter, $window, $http, $log) {
init();
function init() {
//Pagination varibles
var paginationOptions = {
paginationPageSizes: [5, 10, 20, 30, 40, 50],
pageNumber: 1,
paginationPageSize: 10,
};
var sortingOptions = {
columnName: 'ActID',
isAscending: true,
};
$scope.currentPage = 1;
$scope.pageSize = paginationOptions.pageSize;
//end here
$scope.loadData = function() {
$scope.items = [
{
ActID: '1',
Name: '1',
NameE: '1',
},
{
ActID: '2',
Name: '2',
NameE: '2',
},
{
ActID: '3',
Name: '3',
NameE: '3',
},
{
ActID: '4',
Name: '4',
NameE: '4',
},
{
ActID: '5',
Name: '5',
NameE: '5',
},
{
ActID: '6',
Name: '6',
NameE: '6',
},
{
ActID: '7',
Name: '7',
NameE: '7',
},
{
ActID: '8',
Name: '8',
NameE: '8',
},
{
ActID: '9',
Name: '9',
NameE: '9',
},
{
ActID: '10',
Name: '10',
NameE: '10',
},
{
ActID: '11',
Name: '11',
NameE: '11',
},
{
ActID: '12',
Name: '12',
NameE: '12',
},
{
ActID: '13',
Name: '13',
NameE: '13',
},
{
ActID: '14',
Name: '14',
NameE: '14',
},
{
ActID: '15',
Name: '15',
NameE: '15',
},
{
ActID: '16',
Name: '16',
NameE: '16',
},
{
ActID: '17',
Name: '17',
NameE: '17',
},
{
ActID: '18',
Name: '18',
NameE: '18',
},
{
ActID: '19',
Name: '19',
NameE: '19',
},
{
ActID: '20',
Name: '20',
NameE: '20',
},
];
};
var columns = [];
columns = getHeaderColumns();
$scope.loadData();
$scope.gridOptions = {
data: 'items',
enableColumnResizing: true,
enableRowReordering: true,
enablePaging: true,
enableFiltering: true,
treeRowHeaderAlwaysVisible: false,
showFooter: true,
showFilter: false,
showGroupPanel: true,
showColumnFooter: true,
displaySelectionCheckbox: false,
showTableBorder: true,
enableRowSelection: true,
selectionRowHeaderWidth: 35,
enableRowHeaderSelection: false,
paginationPageSizes: [5, 10, 25],
paginationPageSize: 5,
useExternalPagination: true, // custom
useExternalSorting: true, // custom
useExternalFiltering: true, // custom
enableSorting: true,
columnDefs: [{
field: 'ActID',
type: 'string',
displayName: 'ActID',
},{
field: 'Name',
type: 'string',
displayName: 'Name',
},{
field: 'NameE',
type: 'string',
displayName: 'NameE',
}],
//This code used for export grid data in csv file
enableGridMenu: true,
enableSelectAll: true,
exporterMenuPdf: true,
enableColumnMenus: true,
onRegisterApi: function(gridApi) {
alert("in onRegisterApi");
$scope.gridApi = gridApi;//debugger;
gridApi.selection.on.rowSelectionChanged($scope, function(row) {
alert("in rowSelectionChanged");
var msg = 'row selected ' + row.isSelected;
//$log.log(msg);
console.log(msg);
//$window.alert(msg);
});
gridApi.selection.on.rowSelectionChangedBatch($scope, function(rows) {
alert("in rowSelectionChangedBatch");
var msg = 'rows changed ' + rows.length;
//$log.log(msg);
// $window.alert(msg);
console.log(msg);
});
//Added for custom paging
gridApi.pagination.on.paginationChanged($scope, function(
newPage,
pageSize
) {
alert("in paginationChanged");
paginationOptions.pageNumber = newPage;
paginationOptions.pageSize = pageSize;
$scope.pageSize = pageSize;
$scope.currentPage = newPage;
$scope.totalPage = Math.ceil(
$scope.gridOptions.totalItems / $scope.pageSize
);
$scope.loadData();
});
//custom sort
gridApi.core.on.sortChanged($scope, function(grid, sortColumns) {
alert("in sortChanged");
if (sortColumns.length === 0) {
sortingOptions = null;
} else {
sortingOptions = sortColumns[0].sort.direction;
}
$scope.loadData();
});
},
};
}
$scope.RefreshGridData = function() {
$scope.loadData();
};
$scope.ungroupData = function() {
$scope.gridApi.grouping.clearGrouping();
};
}
]
);
function getHeaderColumns() {
var columns = [];
columns.push({
field: 'ActID',
type: 'string',
displayName: 'ActID',
});
columns.push({
field: 'Name',
type: 'string',
displayName: 'Name',
});
columns.push({
field: 'NameE',
type: 'string',
displayName: 'NameE',
});
return columns;
}
Hope this helps.