Search code examples
angularjsng-gridangular-ui-grid

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


Solution

  • 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