3

Here's a StackBlitz that demonstrates the issue/question: https://stackblitz.com/edit/react-s9l2kj

(this is essentially a modified version of the Example Row Class Rules code from the ag-grid website)

I have a getRowClass function that needs to be updated when a property passed to my component changes. In the provided code example, this is passed to the Grid component (here's a cut-down version): 

const Grid = (props) => {
  const getRowClass = (params) => {
    var numSickDays = params.data.sickDays;

    if (numSickDays > props.minDays && numSickDays <= props.maxDays) {
      return 'sick-days-warning';
    };

    return '';
  };

  return (
    <>
      <AgGridReact
        rowData={data}
        columnDefs={columnDefs}
        getRowClass={getRowClass}
      />

      <label>Show warning when: {props.minDays} &lt; sick days &lt;= {props.maxDays}</label>
    </>
  );
}

In the StackBlitz example, updating the value in the Min days textbox correctly causes the label to re-render, showing that the new property is correctly being passed to the grid.

Question

Why doesn't the getRowClass function get updated? It looks to me like the AgGridReact is caching the first value for getRowClass that gets passed to it, rather than updating it when a new getRowClass function is getting created - so that feels like a bug... however, I may be misunderstanding how I should be updating the getRowClass function.

gerrod
  • 6,119
  • 6
  • 33
  • 45
  • your getRowClass is basically instantiated only once along with gridOptions. not su re if there is a way to update getRowClass. - https://github.com/ag-grid/ag-grid/issues/1695 – Pratik Bhat May 09 '20 at 18:05
  • 1
    Thanks @PratikBhat for the reply - I can't find a way to update the `getRowClass` function using the API either unfortunately... the only work around I can find is to rebuild the whole grid :-| – gerrod May 11 '20 at 04:23

1 Answers1

0

Please try by defining the getRowClass function inside the gridOptions field and assign this to Ag-grid.

const gridOptions = {
    // all rows assigned CSS class 'my-green-class'
    rowClass: 'my-green-class',

    getRowClass = (params) => {
    if (params.data.sickDays > 8) return 'sick-days-breach';

    var numSickDays = params.data.sickDays;
    if (numSickDays > props.minDays && numSickDays <= props.maxDays) {
      return 'sick-days-warning';
    };

    return '';
  };
}

<AgGridReact
        rowData={data}
        columnDefs={columnDefs}
        getRowClass={getRowClass}
        gridOptions = {gridOptions}
       />
NayanaShet
  • 1
  • 2