17

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);
    };
4
  • 3
    Did you include the ui.grid.selection module as a dependency?
    – c0bra
    Apr 20, 2015 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, 2015 at 1:57
  • try to add this to your onRegisterApi: gridApi.selection.on.rowSelectionChanged($scope, function (row) { // });
    – thangcao
    Apr 23, 2015 at 5:33
  • 17
    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>
    – djnose
    Oct 12, 2015 at 14:52

3 Answers 3

9

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.
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>
1
  • 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, 2018 at 13:32
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.