Get selected row of angularjs ui-grid

Question

I've looked at multiple articles on this ui-grid and its giving me fits. I'm trying to get the selected row object. I'm either getting an undefined or can not read property of 'getSelectedRows'. Any help is greatly appreciated.

I started with this article here and the documentation doesnt seem to be all that great either.

Here is my code:

        vm.gridOptions = {
        enableRowSelection: false,
        enableSelectAll: false,
        showGridFooter:true

    };

    vm.gridOptions.columnDefs = [
        { name: 'productName' },
        { name: 'unitPrice' }
    ];

    vm.gridOptions.multiSelect = false;

    vm.getSelectedRows = function () {
        vm.mySelectedRows = vm.gridApi.selection.getSelectedRows();
    }

     productDataService.getProductList()
         .then(function (result) {                 
             vm.gridOptions.data = result.data;
             vm.mySelectedRows = vm.gridApi.selection.getSelectedRows();<--Property undefined error here
             $timeout(function() {
                 if (vm.gridApi.selection.selectedRow) {
                     vm.gridApi.selection.selectRow(vm.gridOptions.data[0]);
                 }
             });
         });

    vm.gridOptions.onRegisterApi = function(gridApi) {
        vm.gridApi = gridApi;
    }

Answer 1

Hope this helps:

angular.module('app', ['ui.grid', 'ui.grid.selection'])
  .controller('MainCtrl', ['$scope', '$timeout', function($scope, $timeout) {
    var vm = this;
    vm.gridOptions = {
      enableRowSelection: false,
      enableSelectAll: false,
      showGridFooter:true,
      data: [{productName: "Moroni", unitPrice: 50},
             {productName: "Tiancum", unitPrice: 43},
             {productName: "Jacob", unitPrice: 27},
             {productName: "Nephi", unitPrice: 29},
             {productName: "Enos", unitPrice: 34}]
    };
    vm.gridOptions.columnDefs = [
        { name: 'productName' },
        { name: 'unitPrice' }
    ];
    vm.gridOptions.multiSelect = false;
    vm.getSelectedRows = function () {
        vm.mySelectedRows = vm.gridApi.selection.getSelectedRows();
    }
    vm.getProductList = function() {
      vm.gridOptions.data = vm.resultSimulatedData;
      vm.mySelectedRows = vm.gridApi.selection.getSelectedRows(); //<--Property undefined error here
      if (vm.mySelectedRows[0]) {
        alert('Selected Row: ' + vm.mySelectedRows[0].productName + ', ' + vm.mySelectedRows[0].unitPrice + '.');
      } else {
        alert('Select a row first');
      }
      $timeout(function() {
          if (vm.gridApi.selection.selectedRow) {
              vm.gridApi.selection.selectRow(vm.gridOptions.data[0]);
          }
      });
    };
    vm.gridOptions.onRegisterApi = function(gridApi) {
      vm.gridApi = gridApi;
    };
    vm.resultSimulatedData = [{productName: "Moroni1", unitPrice: 50},
                               {productName: "Tiancum1", unitPrice: 43},
                               {productName: "Jacob1", unitPrice: 27},
                               {productName: "Nephi1", unitPrice: 29},
                               {productName: "Enos1", unitPrice: 34}];
    return vm;
  }]);

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.min.css" />
<div ng-app="app" ng-controller="MainCtrl as vm">
  <button ng-click="vm.getProductList()">Get Product List</button>
  <div ui-grid="vm.gridOptions" ui-grid-selection class="gridStyle">
  </div>
</div>

If you can share more of your code that might help me to further help you.