angular ui-grid row selection

Question

I am using angular ui.grid my problem is when I using like below click the row its selected

enableRowSelection: true,
enableRowHeaderSelection: false,
multiSelect: false 

after i changed to

enableRowSelection: true,
enableRowHeaderSelection: true,
multiSelect: false 

now only select checkbox working but did not work click row please help...

Answer 1

this issue has supposedly long been fixed (https://github.com/angular-ui/ui-grid/commit/679b615bd19ff71ff1e835d7f6066e7a919f279a), but it still persisted for me in angular-ui-grid version 3.1.1

There's a fresh issue about it (https://github.com/angular-ui/ui-grid/issues/5474) with a workaround to override a css rule with this one:

.ui-grid-cell.ui-grid-disable-selection.ui-grid-row-header-cell {
  pointer-events: auto;
}

Answer 2

See this issue: https://github.com/angular-ui/ng-grid/issues/2254

Currently both row header selection and row selection do not work in concert. I believe the former was intended as a work-around having row selection when cell navigation was being used.

The change is listed as an enhancement so it's on the roadmap, just not slated for the 3.0 release.

Update:

OK, here's how you can do it (though relying on an unreleased beta module for something that's "urgent" is not a great idea, IMO).

Take the code from the selection feature's uiGridCell directive, rip it out, and put it into your own module. Specifically this code here: https://github.com/angular-ui/ng-grid/blob/v3.0.0-rc.20/src/features/selection/js/selection.js#L757

Here's some unfinied example code. You'll want to make sure that you don't bind on row header cells or the checkbox selection won't work.

angular.module('ui.grid.custom.rowSelection', ['ui.grid'])

.directive('uiGridCell', function ($timeout, uiGridSelectionService) {
  if ($scope.col.isRowHeader) {
    return;
  }

  registerRowSelectionEvents();

  function selectCells(evt) { ... }
  function touchStart(evt) { ... }
  function touchEnd(evt) { ... }
  function registerRowSelectionEvents() { ... }
});

And lastly here's a plunker that demonstrates the whole thing. You can just copy this code and tweak it as you like: http://plnkr.co/edit/44SYdj19pDDaJWiSaPBt?p=preview