ui-gridにカスタム行テンプレートを追加しましたが、行のハイライト機能が失われました

Question

this stack threadの後にグリッドでダブルクリックイベントをキャプチャしました。興味深いことに、私のグリッドは、もはやそのチェックボックス

下のGIFに概説されているようのは、私が行テンプレートを追加する前に 以下のgifで見られるように、すべてが、大丈夫だったし、正しく働いていた、選択された行を強調表示しません

コントローラー：

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>'; 
} 

の一部としてここ

は、行テンプレートコードは：

, rowTemplate: rowTemplate() 

UPDATE

 $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(); 
     }; 

$scope.gridOptions内側：私はテンプレートから<div ng-dblclick="grid.appScope.rowDblClick(row)" >を削除すると、ラインのハイライトは、私は、ダブルクリックの機能を失うものの

Answer 1

問題は、後に多くの解決（戻ってきます試行錯誤！

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>'; 
} 

私は単にng-dblclickがでました、そしてそれので、メインローテンプレートのdivにそれを移動しdivを削除：私は提案の構文でグリッド行のng-dblclickオプションを追加したとき

問題が開始しました次のようになります。

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>'; 
    } 

、グリッドIDまたはスタイルを追加し、その特定のグリッドのためのCSSを追加します。

#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 ----- */