Highest row number in Ag-grid

Question

I am trying to find the highest row number in Ag-grid. Whenever a new row is inserted in the database and displayed on the grid, i have to highlight that newest row with some color. I have already seen some code in the provided link, where a row can be highlighted based on a certain value in a column, but i am trying to determine whether that value is the highest row number or not.

How to provide a background color for an entire row in ag grid based on a certain value in a column?

Any help will be appreciated. Thank you.

score 0 · Answer 1 · answered Aug 30 '21 at 15:39

If you are looking for the count of the no. of rows or the row node object for the last row, you can get it through the grid API object. Here is the guide: https://www.ag-grid.com/javascript-data-grid/grid-api/

Hope you have already stored the grid API object through (gridReady)

<ag-grid-angular
   (gridReady)="functionToStoreGridAPI($event)"
   // ...
/>

score 0 · Accepted Answer · answered Aug 30 '21 at 18:01

you need has a function that get the "element maximum". So imagine a row data like

  rowData = [
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxter', price: 72000 }
  ];

So you has

  @ViewChild('agGrid',{static:true}) agGrid: AgGridAngular; //<--to get the grid
  maximum: any; //<--here we store the greater element

  //your function getGreaterElement
  getGreaterElement()
  {
      //get the element with bigger price
      this.maximum=this.rowData.reduce((a,b)=>+b.price>+a.price?b:a)
      if (this.agGrid.api) //if exist the api
        this.agGrid.api.redrawRows();  //redraw the grid
  }

Your function to add the class (remember you need add the class in styles.css, not in the component)

  getRowClass = params => {
    return params.data === this.maximum ? 'red' : null;
  };

The .css like

.red{
  background-color:red!important;
  color:white!important;
}

.red .ag-input-field-input.ag-text-field-input{
  color:#181d1f!important 
}

Now you need take account when call to the function getGreaterElement

  //in the ngOnInit
  ngOnInit() {
    this.getGreaterElement();
  }

  //when stop edit the cell "price"
  cellEditingStopped(event: any) {
    if (event.column.colId == 'price') this.getGreaterElement();
  }

  //this is a function to add a row
  addRow() {
    const index = this.rowData.length;
    this.rowData.push({ make: '', model: '', price: 0 });
    this.agGrid.api.applyTransaction({
      add: [this.rowData[index]]
    });
    this.agGrid.api.startEditingCell({
      rowIndex: index,
      colKey: 'make'
    });
  }

And the .html

<button (click)="addRow()">add</button>
<ag-grid-angular  #agGrid
    style="width: 500px; height: 200px;" 
    class="ag-theme-alpine"
    [rowData]="rowData" 
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [getRowClass]="getRowClass"
    (cellEditingStopped)="cellEditingStopped($event)"
    >
</ag-grid-angular>

You can see in this stackblitz

Highest row number in Ag-grid

2 Answers2