onClick of rows of ‘Master / Detail – Detail Grids’ in ag-grid I want to perform some action, Is there any way to add onClick handler to ag-grid rows or cells?
I am using 30.2.1 version of ag-grid,
Also my application is react.js app
For setting up an onClick handler on rows for a Master/Detail grid in ag-Grid, within a React application, you can make use of the onCellClicked event. If it is set at a grid level, it will trigger whenever any cell is clicked.
Now, for click processing on detail rows only, you must ensure differentiation between the master and detail rows in the onCellClicked event.
Here’s an example of how to structure this:
import React, { useState } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
const MyAgGridComponent = () => {
const [rowData, setRowData] = useState([
{ id: 1, name: 'John', age: 24 },
{ id: 2, name: 'Doe', age: 32 }
]);
const [detailData, setDetailData] = useState({
1: [{ id: 101, info: 'Detail A1' }, { id: 102, info: 'Detail A2' }],
2: [{ id: 201, info: 'Detail B1' }, { id: 202, info: 'Detail B2' }]
});
const onCellClicked = (params) => {
if (params.node.master) {
console.log('Master row clicked:', params.data);
} else {
console.log('Detail row clicked:', params.data);
}
};
const gridOptions = {
masterDetail: true,
detailCellRendererParams: {
detailGridOptions: {
columnDefs: [
{ field: 'id' },
{ field: 'info' }
],
onCellClicked: onCellClicked
},
getDetailRowData: (params) => {
params.successCallback(detailData[params.data.id]);
}
},
onCellClicked: onCellClicked
};
const columnDefs = [
{ field: 'id' },
{ field: 'name' },
{ field: 'age' }
];
return (
<div className="ag-theme-alpine" style={{ height: 600, width: 800 }}>
<AgGridReact
rowData={rowData}
columnDefs={columnDefs}
gridOptions={gridOptions}
/>
</div>
);
};
export default MyAgGridComponent;
1