title: Angular ui-grid double click row to open pop-up for editing a row
body: <p><strong>VERSION:</strong> </p>
  
  <p>I am using Angular ui-grid version 3.0.0-RC.18 (<a href="http://ui-grid.info/" rel="noreferrer">http://ui-grid.info/</a>).</p>
  
  <p><strong>PROBLEM</strong></p>
  
  <p>I want to implement a double-click event in an ui-grid table. In particular, I want to open a modal pop-up when double-clicking at a row. </p>
  
  <p>I tried to use a ng-dblclick directive inside the rowTemplate definition as is suggested at <a href="https://github.com/angular-ui/ng-grid/issues/2228" rel="noreferrer">https://github.com/angular-ui/ng-grid/issues/2228</a> , but 'dblclick' event is never fired.</p>
  
  <p>Nevertheless, I found a solution, but using a directive created by my own. Can I do it better, without creating a directive?</p>
  
  <p>Any comment would be appreciated.</p>
  
  <p><strong>CODE:</strong> </p>
  
  <p>My code at the Controller is as follows:  </p>
  
  <pre><code>$scope.onDblClick = function(row) {
      var url = '//google.com';
      $window.open(url, "_blank", "height=600,width=800,toolbar=no,location=no,menubar=no,titlebar=no");
  }
  
  // Define the New Conflicts Simulation GRID behavior
  $scope.myGridOptions = {
      showFooter: false,
      enableSorting: true,
      multiSelect: false,
      enableFiltering: true,     
      enableRowSelection: true, 
      enableSelectAll: false,
      enableRowHeaderSelection: false,  
      enableGridMenu: true,
      noUnselect: true,
      onRegisterApi: function (gridApi){
          $scope.gridApi = gridApi;
      },
      rowTemplate: "&lt;div ng-dblclick=\"onDblClick(row)\" 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&gt;&lt;/div&gt;"            
  
  }
  </code></pre>
  
  <p>(Where dbl-click-row indicates I am using the dblClickRow directive)</p>
  
  <p>My code at the View is as follows:</p>
  
  <pre><code>&lt;div id="myGrid" ui-grid="myGridOptions" ui-grid-selection ui-grid-resize-columns class="gridTable" &gt;&lt;/div&gt;
  </code></pre>
  
  <p>My code at the Directive is as follows:</p>
  
  <pre><code>var angularStartDirectives = angular.module('angularStart.directives', []);     
  
  angularStartDirectives.directive('dblClickRow', ['$compile', '$parse',  function($compile, $parse) {
    return {
      priority : -190, // run after default uiGridCell directive
      restrict : 'A',
      scope : false,
  
      compile: function($element, attr) {
  
          // Get the function at ng-dblclick for ui-grid
          var fn = $parse(attr['ngDblclick'], /* interceptorFn */ null, /* expensiveChecks */ true);
  
          return function ngEventHandler(scope, element) {
  
              element.on('dblclick', function(event) {
  
                var callback = function() {
  
                  if ($scope.gridApi.grid.selection.lastSelectedRow)
                  {
                      fn($scope, {$event:event, row: $scope.gridApi.grid.selection.lastSelectedRow.entity });
                  }
                };
  
                $scope.$apply(callback);
  
              }
          )};
  
      }
  
      };
  } ]);
  </code></pre>