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

1
votes

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

2
angulartypescriptag-grid
stackoverflow.com/questions/42809368/… - Joel Joseph
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
you can use on blur event on your controller in ag grid - Priyank_Vadi

2 Answers

0
votes

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

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;