AngularJS ng-grid's method "gridApi.pagination.on.paginationChanged" within onRegisterApi not being called

Question

AngularJS ng-grid's method "gridApi.pagination.on.paginationChanged" within onRegisterApi not being called

976 Views Asked by Yazan At 15 December 2019 at 11:01

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!!!!

Original Q&A

There are 1 best solutions below

**Allabakash** · Accepted Answer · 2019-12-15T16:41:07.753000

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.

AngularJS ng-grid's method "gridApi.pagination.on.paginationChanged" within onRegisterApi not being called

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in ANGULAR

Related Questions in PAGINATION

Related Questions in ANGULAR-UI-GRID

Related Questions in NG-GRID

Trending Questions

Popular # Hahtags

Popular Questions