0

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.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.