What is the best way to update the background color of a row in an AG Grid table when it is clicked

Question

What is the best way to update the background color of a row in an AG Grid table when it is clicked

I'm struggling to dynamically change the background color of a row in an ag-grid table when it is clicked. I have attempted using getRowStyle and getRowClass, but those methods only work when the table is initially loaded. I then tried utilizing onrowClicked, but that approach has not been successful.

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 am aiming for the row's background color to update upon clicking based on various data parameters.

angular typescript ag-grid

Answer 1

Answer №1

It is recommended to utilize the getRowStyle function and manually activate it by using refreshCells() upon clicking the row through the onRowClicked event.

Furthermore, within the getRowStyle callback, ensure to check the node.isSelected() property to determine if the row/node is selected or not.

gridOptions.onRowClicked = function(params) {
  gridOptions.api.refreshCells({
    rowNodes: [params.node],
    force: true // bypasses 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' };
    }
  }
}

Answer 2

It is recommended to utilize the getRowStyle function and manually activate it by using refreshCells() upon clicking the row through the onRowClicked event.

Furthermore, within the getRowStyle callback, ensure to check the node.isSelected() property to determine if the row/node is selected or not.

gridOptions.onRowClicked = function(params) {
  gridOptions.api.refreshCells({
    rowNodes: [params.node],
    force: true // bypasses 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' };
    }
  }
}

Answer 3

Answer №2

To achieve this, utilize ngFor* and bind a click event with each 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: Create an array with the same number of items as you are iterating through, assign indices, and add a property "selected = false" initially.

row = policies;

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

CSS:

.myBackgroud
{
  background:aqua; 
}

You can adjust the CSS styles as needed;

Answer 4

To achieve this, utilize ngFor* and bind a click event with each 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: Create an array with the same number of items as you are iterating through, assign indices, and add a property "selected = false" initially.

row = policies;

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

CSS:

.myBackgroud
{
  background:aqua; 
}

You can adjust the CSS styles as needed;

What is the best way to update the background color of a row in an AG Grid table when it is clicked

Answer №1

Answer №2

Similar questions

Angular: Where does the problem lie - with the application or the deployment?

Clicking on the <Link to=URL> in a React application built with Typescript and Redux triggers the disappearance of the component

Once the submit button is clicked in Angular Dev Extreme, validation processes are triggered once more

Guarding Routes and Navigating Dynamically in Angular

How do I pass a value from my Angular2 directive into the template?

ag-Grid - Apply Row-Level Formatter instead of Column-Level Formatter

Is it possible to use ng-bootstrap with vertical tabs?

Angular allows for the dynamic updating of og meta tags

Avoid generating `.d.ts` definition files during the onstorybook build process in a Vite React library project

Unable to resolve host name for registry.npmjs.org on port 80

Angular: Retrieve the parameter value from the parent route

Tips on showing validation error message through a tooltip when hovering over the error icon in Ionic

Using Express and Node.js, fetch an image from one localhost and transfer it to another localhost

The variable 'selectedvalue' is being accessed before it has been initialized

Switch things up in the mat-tree angular

Is Error k originating from Angular or Electron?

How can I send form data along with images from Angular to Node.js via an http post request?

TypeError: describe is not a function in the Mocha testing framework

Ways to show a div when a dropdown option is selected

What is the workaround for using DomSanitizer in a unit test when the component does not automatically inject it?