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

Solution 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.

Solution 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 !

Solution 3

The most easy way to get current "clicked, changed" and whatever event want is to add a cell template like this in gridOptions:

vm.gridOptions = {
    enableColumnMenus: false,
    enableHorizontalScrollbar: 0,
    enableVerticalScrollbar: 0,
    enableRowSelection: false,
    enableRowHeaderSelection: false,
    rowHeight: 30,
    multiSelect: false,
    appScopeProvider: vm,
    onRegisterApi: function(gridApi) {
   vm.gridApi = gridApi;
},
columnDefs: [{
    {
    displayName: "",
    field: "delete",
    enableSorting: false,
    width: "80",
    cellTemplate: '<div class="ui-grid-cell-contents"><span class="grid-cell-icon fa fa-trash" ng-click="grid.appScope.vm.deleteRowModal(row.entity)"></span></div>'
    }
    ...
    ] 
}

So row.entity is pass data from row in controller!

If you want to show grid data value from JSON and not delete icon like it is in this case put {{COL_FIELD}} Hope now everybody can take values from cliked row from ui-grid.