0

The app I am working on requires me to access the paginationChanged function which is only available to me if I were to add an onRegisterApi object to my gridOptions in the table. I need to access the paginationChanged function so that I can change the height of the grid as the PageSize increases. The only way that I know of to access the the gridApi is to inject $scope which is no longer being used in since Angular 1.6 and up. Right now I am using Angular 1.6 and to access the gridOptions on the html view is through the use of ui-grid= $ctrl.gridOptions. Does anyone know of a way to access the gridApi when part of the onRegisterApi object without having to use $scope?

Stephanie Cray
  • 11
  • 1
  • 6
  • What's this about Angular 1.6 not using $scope? – JC Ford Sep 29 '17 at 16:17
  • I'm not clear on what you're asking for. The `onRegisterApi` callback is there specifically to give you access to the gridApi. You can attach your grid event handlers at that point and even save a controller reference to the gridApi for use in other event handlers if necessary. Can you elaborate on what you're trying that isn't working? – JC Ford Sep 29 '17 at 16:20
  • Thanks @JCFord , I am trying to access the gridAPI in the onRegisterApi callback but I can't because it requires the usage of $scope in the controller. My controller hasn't been written with the usage of $scope because from that I have learned , in Angular 1.6 and up $scope is no longer to be used. So I am wondering if there is a way to access gridApi without having to use $scope because I still need access to the properties associated within it. – Stephanie Cray Sep 29 '17 at 16:49
  • @JCFord , I forgot to add, that what I am trying that isn't working is just plainly trying to access the gridApi when I implement the following code: onRegisterApi: function(gridApi) { console.log($ctrl.gridApi)}. It comes up as undefined in the console. The following code works just fine because using $scope in the controller : onRegisterApi: function(gridApi){console.log($scope.gridApi)}. – Stephanie Cray Sep 29 '17 at 17:05
  • The answer below should work for your gridApi access. Please note, though, that $scope is still an integral part of AngularJS including the 1.6 versions. – JC Ford Sep 29 '17 at 17:16

2 Answers2

1

The way to access gridApi without the usage of $scope in the controller or service where your gridOptions object lives is to make sure that you add the following properties: appScopeProvider: which allows you to set the name of your this object which is my case was $ctrl. and onRegisterApi: which is needed to allow you to access to the gridApi. Reference http://ui-grid.info/docs/#/api/ui.grid.class:GridOptions

When you use appScopeProvider to reset the name of your this object , you also are setting the name for the gridApi. So in instead of using the $ctrl.gridapi you would only need to use $ctrl by itself. So in my case the solution was the following:

 var OverViewTable = function ($ctrl) {
     var gridOptions = {
         enableSorting: true,
         enablePagination: true,
         enablePaginationControls: true,
         paginationPageSizes: [50, 100, 200],
         paginationPageSize: 50,
         rowHeight: 60,
         appScopeProvider:$ctrl,
         onRegisterApi: function ($ctrl){
         $ctrl.pagination.on.paginationChanged(null, function(newPage, 
          pageSize){}

I also had to set where you would normally see $scope to null as an argument in the function paginationChanged() since I didn't want to use $scope.

Stephanie Cray
  • 11
  • 1
  • 6
0

The gridApi object does not get added to your $ctrl automatically. If you want it there, you have to attach it yourself.

Here's how to access the gridApi through the onRegisterApi callback:

$ctrl.gridOptions = {
    onRegisterApi = function(gridApi){

        //Save a reference to the gridApi for later
        $ctrl.gridApi = gridApi;

        //Attach your event handlers
        gridApi.cellNav.on.navigate($scope,function(newRowCol, oldRowCol){
            $log.log('navigation event');
        });

    }
}

http://ui-grid.info/docs/#/api/ui.grid.class:GridApi

JC Ford
  • 6,946
  • 3
  • 25
  • 34