Sunday, December 28, 2014

ui-grid / ng-grid 3.0 and double click row feature...

To my sad experience the comment that double click was not provided because of touch devices was a mistery. So after many hours with my limited knowledge found a way to add the double click with uiGrid v3.0.0. First your app.js file add the following directive:

directive('dblClickRow', [
    '$compile',
    function($compile, $parse, $log) {
      return {
        priority : -190, // run after default uiGridCell directive
        restrict : 'A',
        scope : false,
        link : function($scope, $elm, $attrs, $log) {
          if ($scope.grid.options.enableRowSelection && !$scope.grid.options.enableRowHeaderSelection) {
            $elm.addClass('ui-grid-disable-selection');
            registerRowSelectionEvents();
          }
          function registerRowSelectionEvents() {
            $elm.on('dblclick', function(evt) {
              $log.log("double click on row", evt);
            });
          }
        } };
    } ])    ;
Next you setup your grid with the following rowTemplate in your grid controller...
$templateCache.put('ui-grid/ui-grid-row',  
     + "<div " //
     + " ng-repeat=\"(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name\" class=\"ui-grid-cell\" ng-class=\"{ 'ui-grid-row-header-cell': col.isRowHeader }\"" + " ui-grid-cell dbl-click-row></div>");
Next in your grid setup .... register the event and run with it ...
var selectedRow;
$scope.gridOptions.onRegisterApi = function(gridApi) {
  $scope.gridApi = gridApi;
  gridApi.selection.on.rowSelectionChanged($scope, function(row) {
    var msg = 'row selected ' + row.isSelected;
    if (row.isSelected) {
      selectedRow = row;
    }
    else {
      selectedRow = undefined;
    }
    $log.log(selectedRow);
  });
  gridApi.registerEvent('selection', 'dblClick');
  gridApi.selection.on.dblClick($scope, function() {
    if (selectedRow) {
      $scope.open(selectedRow.entity);
    }
  });
};