how do i change the background color of row on click in ag grid table

Question

I want to change the background color of a row in ag-grid table ,on click of the row

i have tried using the getRowStyle and getRowClass, but that seems to work when the table is loaded initially . So i tried with onrowClicked, but doesnt seem to work.

onRowClicked : row => {
        if (row.data.hasNewData) {
          return { background: '#ff9998 !important'};
        } else if (row.data.hasWrongData === 'Yes') {
          return { background: '#f5ff8b !important' };
        } else if (row.data.hasNoData) {
          return { background: '#acff93 !important' };
        }
      }

i want the row background color to change on click based on different data parameters

https://stackoverflow.com/questions/42809368/angular-2-adding-a-class-to-a-dom-element-when-clicked — Joel Joseph, Aug 16 '19 at 07:37
if you are in `ngFor` loop you can alternatively pass the element reference / template reference `#row` on click and use the `element.classList.add("someClass"); ` — Joel Joseph, Aug 16 '19 at 07:40

score 1 · Answer 1 · answered Aug 19 '19 at 06:47

You should stick to getRowStyle and trigger it manually with refreshCells() when clicking the row by consuming the onRowClicked event.

Also, in the getRowStyle callback, you need to use node.isSelected() property in order to detect whether or not the row/node is selected.

gridOptions.onRowClicked = function(params) {
  gridOptions.api.refreshCells({
    rowNodes: [params.node],
    force: true // skips change detection -> always refreshes the row
  })
}

gridOptions.getRowStyle = function(params) {
  if (params.node.isSelected()) {
    if (row.data.hasNewData) {
      return { background: '#ff9998 !important'};
    } else if (row.data.hasWrongData === 'Yes') {
      return { background: '#f5ff8b !important' };
    } else if (row.data.hasNoData) {
      return { background: '#acff93 !important' };
    }
  }
}

score 0 · Answer 2 · answered Aug 19 '19 at 07:13

Use ngFor* and then bind Some click event with the Row:

Html:

<table>
 <thead>
   <th># Policy ID</th>
   <th>Policy name</th>
 </thead>
 <tbody>
    <tr *ngFor="let policy of policies; let i = index " (click)="changeBackGroud(i)" >
     <div [ngClass]="{'myBackgroud' : row[i].selected}">
      <td>{{policy.id}}</td>
      <td>{{policy.name}}</td>
     </div>
    </tr>
 </tbody>
</table>

Ts: make an array equal to the no. of items you are iterating with along with the indices and a property "selected = false" initially.

row = policies;

// i is the index of selected item
changeBackGroud(i)
{
  row.forEach(function(element) {
      element.selected = false;
        });
  row[i].selected=true;
}

Css:

.myBackgroud
{
  backgroud:aqua; 
}

You can make adjustments to CSS accordingly;

how do i change the background color of row on click in ag grid table

2 Answers2