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>
);
}
};
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);
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.