Access master record from detail table with AG Grid master detail view

Question

I'm not sure if there is a way to do this but I feel like there should be. Maybe I'm just not finding it.

I have a custom cell renderer in the detail view and thought I could use something out of ICellRendererParams to access the parent.

Codesandbox: https://codesandbox.io/s/ag-grid-master-detail-example-hzspzg?file=/src/App.tsx

Ophthalmoscopy

I don't know enough React to make a good answer, but this may help? ag-grid.com/react-data-grid/master-detail-custom-detail/… The Name and Phone Number from the Master row is shown in the Detail section – Lamm

Answer 1

I guess this is what you want

NOTE: I have converted your typescript example to a javascript example. Please tweak the code according to your needs.

Working Plunker: https://plnkr.co/plunk/rcgG2ud5737WzX9d

Description

We are going to get benefit from the object called 'context'.

I have modified your detailCellRenderer like that

const detailCellRendererParams = useMemo(() => {
  return (params) => {
    var res = {};
    res.detailGridOptions = {
      columnDefs: DETAIL_COLUMNS,
      defaultColDef: defaultColDef,
      context: {
        params: params, // attention!
      },
    };
    res.getDetailRowData = (params) => {
      params.successCallback(params.data.users);
    };

    return res;
  };
}, [defaultColDef]);

In the code above, I have embedded the grid param inside the context object. It is going to provide us a reference to the master grid.

Now, in your CustomerUserCell renderer, I have also modified the existing code to get the grid param object from the context. You can log rest.context.params to check what you've got there.

import React from 'react';
export default ({ node, columnApi, ...rest }) => {
  console.log('node', node);
  console.log('columnApi', columnApi);
  console.log('rest', rest);

  const handleClick = () => {
    alert(`Role id is: ${rest.context.params.data.roleId}`); // remember params?
  };

  return <button onClick={handleClick}>Click me</button>;
};

I have got some help from this and this

You can also check my expanded answer here: ag-grid - how to get parent node from child grid via context menu?

Khalkha