Angular UI Grid - Click event on selected row

Question

Target

I've got a UI Grid. When I click on a row it should get selected and a function with the row as a parameter should be called.

Current Approach

I use the following config code to generate the Grid:

$scope.gridOptions = {
        enableFiltering: true,
        enableRowHeaderSelection: false,
        enableRowSelection: true,
        multiSelect: false,
        noUnselect: true,
        onRegisterApi: function (gridApi) {
            $scope.gridApi = gridApi;
            $scope.gridApi.selection.on.rowSelectionChanged($scope, function (row) {
                var name = row.entity.name;
                $scope.addToQueue(name);
            });
        }
    };

Problem

The above code works well when I actually change the selection (as the name of the function suggest). But it should be possible to add a row multiple times to the queue. So I want to call $scope.addToQueue(name) even when the row is already selected.

Answer 1

For row to be selected, when it is clicked, I use following:

Use selectionCellTemplate for all columns:

 var selectionCellTemplate = '<div class="ngCellText ui-grid-cell-contents">' +
               ' <div ng-click="grid.appScope.rowClick(row)">{{COL_FIELD}}</div>' +
               '</div>';

 $scope.gridOptions.columnDefs = [        
    { name: 'name', displayName: 'Name', width: '15%', cellTemplate: selectionCellTemplate },       
   ];

And then define rowClick() method as:

 $scope.rowClick = function (row) {       
    var index = row.grid.renderContainers.body.visibleRowCache.indexOf(row);
    $scope.gridApi.selection.selectRow($scope.gridOptions.data[index]);
};

I have also defined multiselect to be true

$scope.gridOptions.multiSelect = true;

So row click will select the row and add it to the selected rows. you can access these selected rows as (It is triggered for each row select/unselect) :

$scope.gridOptions.onRegisterApi = function (gridApi) {
    //set gridApi on scope
    $scope.gridApi = gridApi;        
    gridApi.selection.on.rowSelectionChanged($scope, doSelection);
};

function doSelection(row) {      
    _.each($scope.gridApi.selection.getSelectedRows(), function (row) {
        //Do something //It is triggered for each row select/unselect         
    });
}

Or selected rows can be accessed anytime:

  $scope.gridApi.selection.getSelectedRows()

Answer 2

move the call to addToQueue function to gridApi.grid.element.on('click'...) function, and store row in gridApi.selection.on.rowSelectionChanged function:

$scope.gridOptions.onRegisterApi = function (gridApi) {
  //set gridApi on scope
  $scope.gridApi = gridApi;
  gridApi.selection.on.rowSelectionChanged($scope, function (row) {
    $scope.gridApi.grid.appScope.lastSelectedRow = row;
  });

  gridApi.grid.element.on('click', function (ev) {
    if ($scope.gridApi.grid.appScope.lastSelectedRow) {
      // affect only rows (not footer or header)
      if (ev.target.className.includes('ui-grid-cell-contents')) {
        var name = $scope.gridApi.grid.appScope.lastSelectedRow.entity.name;
        $scope.addToQueue(name);
      }
    }
  });
};

$scope.addToQueue = function addToQueue (name) {
  console.log('addToQueue fired, name = ' + name);
};

plunker: http://plnkr.co/edit/qtXJ7MUy35QRjYXkEXuG?p=preview

Answer 3

The approved answer worked will for me but for a small bug here...

var selectionCellTemplate = '<div class="ngCellText ui-grid-cell-contents">' +
           ' <div ng-click="grid.appScope.rowClick(row)">{{COL_FIELD}}</div>' +
           '</div>';

I needed to change this to...

var selectionCellTemplate = '<div class="ngCellText ui-grid-cell-contents"
           ng-click="grid.appScope.rowClick(row)">' +
           '<div>{{COL_FIELD}}</div>' +
           '</div>';

You will notice I moved the ng-click to the parent div. This was required as if a cell was empty, the ng-click event would not fire.