React ag-grid not re-rendering group row when delta row mode is on

Question

I am binding an ag-grid in react via redux to my dataset, and by using the deltaRowDataMode on the grid options, it should only re-render the items which change.

However I am grouping the rows and have a custom renderer for the full width group row. This custom header gives a summary of the state of the items within the group. When you have deltaRowDataMode set to true, this group header does not get re-rendered as it doesn't think it has changed, though the content is driven from the child nodes.

How can I force the grid to re-render the group header row when a child item changes?

My grid options

deltaRowDataMode: true,
  enableColResize: true,
  enableFilter: true,
  enableSorting: true,
  frameworkComponents: { groupRowInnerRenderer: GroupRowInnerRenderer },
  getRowNodeId: (data:any) => {
    return data.EntryId;
  },
  groupDefaultExpanded: 1,
  groupRowInnerRenderer: "groupRowInnerRenderer",
  groupRowRendererParams: { suppressCount: true, checkbox: true },
  groupSelectsChildren: true,
  groupSelectsFiltered: true,
  groupUseEntireRow: true,
  rememberGroupStateWhenNewData: true,
  rowHeight: 35,
  rowSelection: "multiple"

and my group row renderer (which doesnt get called when an individual piece of data updates when delta mode is on

import * as React from 'react';
import { SIGNOFF_STATE_REJECTED, SIGNOFF_STATE_SIGNEDOFF, SIGNOFF_STATE_WAITING } from '../constants/signoff-constants';

interface IGroupRowInnerRendererState {
    groupName: string,
    signedOffCount: number,
    awaitingCount: number,
    rejectedCount: number
}

export default class GroupRowInnerRenderer extends React.Component<{}, IGroupRowInnerRendererState> {
    constructor(props:any) {
        super(props);

        props.reactContainer.style.display = "inline-block";

        const node = props.node;
        const children = props.node.childrenAfterFilter;
        const signoffs = children.map((d:any) => d.data.Signoffs).reduce((acc:any, value:any) => acc.concat(value), []);

        this.state = {
            awaitingCount: signoffs.filter((s:any) => s.SignoffState === SIGNOFF_STATE_WAITING).length,
            groupName: node.key,
            rejectedCount: signoffs.filter((s:any) => s.SignoffState === SIGNOFF_STATE_REJECTED).length,
            signedOffCount: signoffs.filter((s:any) => s.SignoffState === SIGNOFF_STATE_SIGNEDOFF).length,            
        };
    }

    public render() {
        let waitingClass = "Header-Signoff-Item Signoff-Waiting ";
        if (this.state.awaitingCount === 0) { waitingClass += "Signoff-Hidden"} else { waitingClass += "Signoff-Visible"}

        let signedOffClass = "Header-Signoff-Item Signoff-SignedOff ";
        if (this.state.signedOffCount === 0) { signedOffClass += "Signoff-Hidden"} else { signedOffClass += "Signoff-Visible"}

        let rejectedClass = "Header-Signoff-Item Signoff-Rejected ";
        if (this.state.rejectedCount === 0) { rejectedClass += "Signoff-Hidden"} else { rejectedClass += "Signoff-Visible"}

        return (
            <div className="Header-Signoff-Cell">
                <div style={{width:1100, marginLeft:5}}>{this.state.groupName}</div>
                <div style={{width:20}} />
                <div className={waitingClass}>
                    <div className="Signoff-Item-Part">
                        <div className="Signoff-Item-Part">{this.state.awaitingCount} Awaiting signoff</div>                            
                    </div>                            
                </div>
                <div className={signedOffClass}>
                    <div className="Signoff-Item-Part">
                        <div className="Signoff-Item-Part">{this.state.signedOffCount} Signed off</div>                            
                    </div>                            
                </div>
                <div className={rejectedClass}>
                    <div className="Signoff-Item-Part">
                        <div className="Signoff-Item-Part">{this.state.rejectedCount} Rejected</div>                            
                    </div>                            
                </div>
            </div>
        );
    }
};

mb4828 mb4828 · Accepted Answer · 2019-03-07T20:37:35

I'm having the same problem with a project that I'm working on. I was able to get around it by writing methods to remove and then re-apply the grouping to the column state each time an update occurs (see below). Unfortunately, this causes the grid to flicker, so it's not foolproof. If anybody has a better solution, it would be much appreciated.

import { GridOptions } from "ag-grid";

/** Helper function for AG Grid to set row grouping. Columns will be grouped in the order they are passed */
export function setRowGroups(gridOptions: GridOptions, fields: string[]) {
    if (gridOptions && gridOptions.columnApi) {
        const state = gridOptions.columnApi.getColumnState();
        let rowGroupIndex = 0;
        for (const field of fields) {
            const column = state.filter(c => c['colId'] === field)[0];
            if (column) { column['rowGroupIndex'] = rowGroupIndex++; }
        }
        gridOptions.columnApi.setColumnState(state);
    }
}

/** Helper function for AG Grid to clear row grouping */
export function clearRowGroups(gridOptions: GridOptions) {
    if (gridOptions && gridOptions.columnApi) {
        const state = gridOptions.columnApi.getColumnState();
        for (const column of state) {
            column['rowGroupIndex'] = null;
        }
        gridOptions.columnApi.setColumnState(state);
    }
}

React ag-grid not re-rendering group row when delta row mode is on

1 Answers