Aggrid Angular to Expand Row Ancestors with Serverside rendering

Version "ag-grid-enterprise": "^33.1.1"

Goal: Highlight the newly created node row and focus it in the middle after an API call. If groupings are collapsed, the ancestors group that contain the node should be expanded.

Currently, it will refresh the grid this.gridApi!.refreshServerSide({ route: route, purge: false });

then the API call will return the row id and perform the highlighting and expansion (if any) this.highlightRow(rowId)

The following code will expand one grouping level, it should expand all grouping levels to reveal the targeted node.

highlightRow(newRowId: string) {
const rowId = "leaf-" + "newRowId;

// Step 1: Expand all groups to ensure row is created
this.gridApi.forEachNode((node) => {
if (node.group) {
node.setExpanded(true); // Expand all groups for now
}
});

// Step 2: Delay to allow AG Grid to render and register nodes
setTimeout(() => {
const leafRowNode = this.gridApi.getRowNode(rowId);

if (leafRowNode) {
this.gridApi.ensureNodeVisible(leafRowNode, "middle");
this.gridApi.flashCells({
rowNodes: [leafRowNode],
flashDuration: 5000,
fadeDuration: 1000,
});
} else {
console.warn("Leaf row not found after expansion:", rowId);
}
}, 100);
}


Note: that this is my getRowId

public getRowId: GetRowIdFunc = (params: GetRowIdParams<IRequest>) => {
// Get row group cols
const rowGroupCols = params.api.getRowGroupColumns();

// Leaf node
if (params.data.id != null && rowGroupCols.length === params.level) {
return "leaf-" + params.data.id;
}

// Group node
const rowGroupColIds = rowGroupCols.map((col) => col.getId()).join("-");
const thisGroupCol = rowGroupCols[params.level];
const t =
"group-" +
rowGroupColIds +
"-" +
(params.parentKeys?.map((x) => x ?? "Others") || []).join("-") +
this.getValue(params.data, thisGroupCol.getColDef().field!);
return t;
};


Other relevant issue is that when there is grouping applied, the const leafRowNode = this.gridApi.getRowNode(rowId); is undefined but if there are no grouping appiled, it works as intended.

This link on setRowNodeExpanded might help.

Continue reading...