up vote 1 down vote favorite
1

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.

share|improve this question
up vote 1 down vote accepted

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()
share|improve this answer
up vote 0 down vote

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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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