CODEWITHSUNDEEP
javascriptangularjsangular-ui-grid
Anton
Anton

Reputation: 796

angular ui-grid highlight entire row by cell click

It looks like a simple task, but I already spent 4 hours to find a solution. How can I highlight the entire row by cell click?

On register api I have next

 $scope.gridOptions.onRegisterApi = function(gridApi){
       $scope.gridApi = gridApi;
       gridApi.cellNav.on.navigate($scope,function(selected){

          if('.ui-grid-cell-focus '){
            console.log("fired class")
                $(selected.row.entity).addClass('ui-grid-cell-focus')
                        }

            console.log("fired cell")
                        $(selected.row.entity).addClass('ui-grid-cell-focus')

            });
    };

I see how click on cell is fired, but I cannot force to color the row and I don't want to select the row, because I use check box selection for this purpose, I just want to highlight the row by click on any cell in this row. Could somebody tell me where my mistake is?

Attached plunker

Upvotes: 1

Views: 3997

Answers (1)

Birgit Martinelle
Birgit Martinelle

Reputation: 1889

One way to accomplish what you want is to add a cellClass definition to your columnDefs. That function takes two params: grid and row.

 $scope.gridOptions.columnDefs = [{
    name: 'id',
    width: '150',
    cellTemplate: "",
    cellClass: getCellClass
  }, {
    name: 'name',
    width: '200',
    cellClass: getCellClass
  } ...
];

 function getCellClass(grid, row) {
    return row.uid === selectedRow ? 'highlight' : '';
 }

On click you could set a variable to the uid of the row, and inside the cellClass function you can check if the uid of the current row matches the uid of the selected, if so, you can set the class to a class that properly reflects the background color of the selected row.

 var selectedRow = null;
 gridApi.cellNav.on.navigate($scope, function(selected) {
   if ('.ui-grid-cell-focus ') {
        selectedRow = selected.row.uid;
        gridApi.core.notifyDataChange(uiGridConstants.dataChange.COLUMN);
   }
});

Here's a link to your updated plunker: http://plnkr.co/edit/AgpAI2cmdqgNsSLVNjYA?p=preview

If you don't like the cellClass approach you could define custom cellTemplates and similarly react to a property you set on the row entity.

Upvotes: 2

Related Questions