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);
    };

Did you include the ui.grid.selection module as a dependency? — c0bra, Apr 20 '15 at 20:19
yes. I did. The manipulation in $scope.gridOptions.onRegisterApi cannot change the variable value. Why? It refer to ui-grid? — Charles, Apr 21 '15 at 01:57
try to add this to your onRegisterApi: gridApi.selection.on.rowSelectionChanged($scope, function (row) { // }); — thangcao, Apr 23 '15 at 05:33
You might forgot to add `ui-grid-selection` to add to your div `
` — djnose, Oct 12 '15 at 14:52

score 9 · Answer 1 · answered Apr 21 '15 at 19:52

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.

score 6 · Answer 2 · answered Aug 01 '17 at 17:31

6

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>

answered Aug 01 '17 at 17:31

F.Igor

4,119
1
18
26

2

I was not including ui.grid.selection in app.js or adding the ui-grid-selection directive. Adding these items fixed my issue. – Ian Jul 10 '18 at 13:32

score 0 · Answer 3 · answered Nov 19 '18 at 15:37

0

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.

answered Nov 19 '18 at 15:37

Ollo Kambou

1
1
1

Cannot read property 'selection' of undefined

3 Answers3