Added custom row template to ui-grid but lost row highlight functionality - angular-ui-grid

Question

I followed this stack thread to capture a double-click event on my grid. Interestingly though, my grid no longer highlights rows whose check-box's have been selected, as outlined in the gif below
Before I added the row template, everything was fine and worked correctly, as seen in the gif below
Here is the row template 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 the <div ng-dblclick="grid.appScope.rowDblClick(row)" > from the template, the line highlight comes back (although I lose the double click functionality

Answer 1

Problem solved after much trial and error!
The problem started when I added the ng-dblclick option for grid rows with the suggested syntax:
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>';
}
I simply removed the div that the ng-dblclick was in, and moved it into the main row template div so it now looks like this:
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

I faced the same issue before.
Apparently, when we add the outside div for double-click, it messes up the CSS for highlighting. So in your example, on selecting the checkbox, row gets selected, but the highlighting doesn't happen.
Solution for this is:
Row Template:
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>';
}
And add CSS for that specific grid, adding Grid Id or style:
#gridStyle .ui-grid-row.ui-grid-row-selected > [ui-grid-row] .ui-grid-cell {
background-color: #c9dde1;
}

Answer 3

My plunker working sample
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 ----- */