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.

Answer 2

If you want to filter out and select a column from the selected row(s), you can run a small loop and filter the value which you require as follows:

 $scope.Grid.onRegisterApi = function (gridApi) { $scope.Grid= gridApi; };

Then to a button outside the grid you can add the following method to it's ng-click event.

$scope.DoSomthing= function () {
    var rows = $scope.Grid.selection.getSelectedRows();
    angular.forEach(rows, function (row, key) {
        angular.forEach(row, function (column, colKey) {
            if (colKey == "Your Column binding string")
            {
                console.log(column);
            }
        });   
    });

Then probably you can create an array of the column values and use where ever you need it.

I hope this helps to anyone looking for a similar functionality !