ag-grid - how to get parent node from child grid via context menu?

Question

As an example, I have a Master\Detail grid.

Master\Detail defined as key-relation model and on getDetailRowData method parent node data exists in params

but how to get parent node data from child view?

Tried via context-menu:

On right click - getContextMenuItems got executed which has an input params

On this sample, child-grid doesn't have any row and node in context-params is null, it's ok, but anyway it should be possible to retrieve the parent details at least via grid API, isn't it ?

Then I've tried to get parent via node: but instead of detail_173 as you can see its ROOT_NODE_ID, and here is a confusion for me.

So question is that how to get parent node data (RecordID 173 just in case) through child-view context menu or any other possible way (without storing temp value, cuz multiple children's could be opened at the same time)

Yes, I've read this part Accessing Detail Grid API, and still unclear how to get parent-node via child-grid.

Answer 1

For React Hook users without access to lifecycle methods, use Ag-Grid Context to pass the parent node (or parent data) to the detail grid via detailGridOptions. No need to traverse the DOM or use a detailCellRenderer unless you want to :)

https://www.ag-grid.com/javascript-grid-context/

detailCellRendererParams: (masterGridParams) => ({
    detailGridOptions: {
        ...
        context: { 
            masterGrid: {
                node: masterGridParams.node.parent, 
                data: masterGridParams.data 
            } 
        },
        onCellClicked: detailGridParams => {
            console.log(detailGridParams.context.masterGrid.node);
            console.log(detailGridParams.context.masterGrid.data);
        }
    }
})

Answer 2

Able to achieve it. Have a look at the plunk I've created: Get master record from child record - Editing Cells with Master / Detail

Right click on any child grid's cell, and check the console log. You'll be able to see parent record in the log for the child record on which you've click.

---

The implementation is somewhat tricky. We need to traverse the DOM inside our component code. Luckily ag-grid has provided us the access of it.

1. Get the child grid's wrapper HTML node from the params - Here in the code, I get it as the 6th element of the gridOptionsWrapper.layoutElements array.

2. Get it's 3rd level parent element - which is the actual row of the parent. Get it's row-id.

3. Use it to get the row of the parent grid using parent grid's gridApi.

  getContextMenuItems: (params): void => {
      var masterId = params.node.gridOptionsWrapper.layoutElements[6]
            .parentElement.parentElement.parentElement.getAttribute('row-id');
      // get the parent's id
      var id = masterId.replace( /^\D+/g, '');
      console.log(id);
      var masterRecord = this.gridApi.getRowNode(id).data;
      console.log(masterRecord);
    },
    defaultColDef: { editable: true },
    onFirstDataRendered(params) {
      params.api.sizeColumnsToFit();
  }

Note: Master grid's rowIds are defined with [getRowNodeId]="getRowNodeId" assuming that account is the primary key of the parent grid.