Added custom string pattern in ui-grid, but lost row highlighting function

Question

I executed this stack thread to capture the double-click event on my grid. Interestingly, however, my grid no longer selects the rows whose checkbox was selected, as indicated in the gif below

Before adding the line pattern, everything was fine and worked correctly, as shown in the gif below

Here is the line pattern code:

Controller:

function rowTemplate() {
   return '<div ng-dblclick="grid.appScope.rowDblClick(row)" >' +
     ' <div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" ui-grid-one-bind-id-grid="rowRenderIndex + \'-\' + col.uid + \'-cell\'" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" role="{{col.isRowHeader ? \'rowheader\' : \'gridcell\'}}" ui-grid-cell></div>' +
     '</div>';
}

As part of $scope.gridOptions:

 , rowTemplate: rowTemplate()

Inside $scope.gridOptions

        $scope.rowDblClick = function(row) {
          console.log('double click event');

          var thisRow = gridApi.selection.getSelectedRows() //gets the clicked row object
          $log.log(thisRow);

          $('.item').on('click', function(){

            //if user clicks on grid tab, should go to grid view else go to patient view
            if ($(this).hasClass('not')){
              console.log('item has .not')
              $state.go('list.patient.patient-information');
            } else {
              console.log('item has .grid')
              $state.go('list.grid');
            }
            //
            $('.item').css('cssText', 'border-radius: 0px !important; background-color: #4B6A89; font-family: Roboto; font-size: 14px; color: white; font-weight: bold; letter-spacing: 1.5px; text-transform: uppercase;')
            $(this).closest('.item').css('cssText', 'border-radius: 0px !important; color: #4B6A89; background-color: white; font-family: Roboto; font-size: 14px; color: #4B6A89; font-weight: bold; letter-spacing: 1.5px; text-transform: uppercase;');
          });
          //after a 2click, deselect the row, so a user can edit another cell
          $scope.gridApi.selection.clearSelectedRows();
        };

UPDATE: when I remove <div ng-dblclick="grid.appScope.rowDblClick(row)" >from the template, the highlight of the line is returned (although I lose the double-click functionality

Answer 1

The problem is solved after much trial and error!

, ng-dblclick :

function rowTemplate() {
  return '<div ng-dblclick="grid.appScope.rowDblClick(row)" >' +
            ' <div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" ui-grid-one-bind-id-grid="rowRenderIndex + \'-\' + col.uid + \'-cell\'" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" role="{{col.isRowHeader ? \'rowheader\' : \'gridcell\'}}" ui-grid-cell></div>' +
         '</div>';
}

div, ng-dblclick, div , :

function rowTemplate() {
  return ' <div ng-dblclick="grid.appScope.rowDblClick(row)" ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" ui-grid-one-bind-id-grid="rowRenderIndex + \'-\' + col.uid + \'-cell\'" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" role="{{col.isRowHeader ? \'rowheader\' : \'gridcell\'}}" ui-grid-cell></div>';
}

Answer 2

.

-, div , CSS . , .

:

:

  function rowTemplate() {
    return '<div ng-dblclick="grid.appScope.rowDblClick(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></div>' +
                 '</div>';
   }

CSS , Grid Id :

 #gridStyle .ui-grid-row.ui-grid-row-selected > [ui-grid-row] .ui-grid-cell {
    background-color: #c9dde1;
}

Answer 3

My working sample plunker

function rowTemplate() {
    return '<div ng-dblclick="grid.appScope.rowDblClick(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></div>' +
        '</div>';
                                                      }

CSS

/* --- ui-grid ------- row hover highlight ----- */

.ui-grid-row:hover .ui-grid-cell {
 background-color: #ff8476;  
}


/* ==== both works ===== */
/*
 .ui-grid-row:nth-child(odd):hover .ui-grid-cell{background:red}
 .ui-grid-row:nth-child(even):hover .ui-grid-cell{background:red}
*/

 /* --- End ----- ui-grid ------- row hover highlight ----- */