vamsikrishnamannem vamsikrishnamannem - 6 months ago 158
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


See this issue:

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.


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:

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) {


  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: