Cannot read property 'selection' of undefined

Question

I'm using ui-grid. But I cannot get the $scope.gridApi from download function. And get the error: Cannot read property 'selection' of undefined. Somebody can tell me the reason? thanks.

    $scope.gridOptions.onRegisterApi = function (gridApi) {
        $log.info('gridApi...');
        $scope.gridApi = gridApi;
        $log.info($scope.gridApi);
    };
    $scope.download = function ($event) {
        $event.stopPropagation();
        var selectedRows = $scope.gridApi.selection.getSelectedRows();
        $log.log('selectedRows....');
        $log.log(selectedRows);
    };

Campobello

Did you include the ui.grid.selection module as a dependency? – Tigges

yes. I did. The manipulation in $scope.gridOptions.onRegisterApi cannot change the variable value. Why? It refer to ui-grid? – Campobello

try to add this to your onRegisterApi: gridApi.selection.on.rowSelectionChanged($scope, function (row) { // }); – Floriated

You might forgot to add ui-grid-selection to add to your div <div ui-grid="gridOptions" class="grid" style="height: 100% !important" ui-grid-edit ui-grid-pagination ui-grid-selection></div> – Aulea

Answer 1

There are three potential causes:

• firstly, not including selection properly, either not including the module in your js code as a dependency, or not including the directive on your grid definition in your html. This will result in having a gridApi, but no gridApi.selection
• secondly, trying to call this before onRegisterApi has fired, or defining onRegisterApi on your gridOptions after onRegisterApi has already fired. This will result in the method not being called, and therefore $scope.gridApi being undefined, which from your error text sounds like what the problem is.
• lastly, problems with your invocation that means the $scope of your download call is different than the $scope you put the gridApi on. This shouldn't really happen, but I guess it could. You could tell this by putting a breakpoint in the method to see what $scope it has.

Crackup

Answer 2

I resolved this issue after checking:

• ui-grid css loaded (ui-grid.min.css)
• ui-grid javascript library loaded (ui-grid.min.js)
• 'ui.grid' and 'ui.grid.selection' added to module initialization app = angular.module('app',['ui.grid','ui.grid.selection'])` )
• adding the ui-grid-selection directive to the ui-grid markup
  <div id="my-grid" ui-grid="gridOptions" ui-grid-selection ></div>

Epicontinental

I was not including ui.grid.selection in app.js or adding the ui-grid-selection directive. Adding these items fixed my issue. – Jambalaya

Answer 3

the answers above are very hepful. But in my case I resolve it after removing : - ui-grid.core.min.js - ui-grid.cellnav.min.js - ui-grid.selection.min.js

from my loading js and keeping only ui-grid.min.js.

Papilionaceous