vamsikrishnamannem vamsikrishnamannem - 5 months ago 133
AngularJS Question

angular ui-grid row selection

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

working example here

Answer

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