Passing data from parent to modal

user_11661737 0
Viewed 171

I've a ag-grid on my parent window. Clicking on a link on a cell fetches details data, and then launches a Modal window. The Modal window then displays the details on another ag-grid on this window.

I also have a button on this Modal window,clicking on which will fetch and re-populate the ag-grid. This functionality works fine for me.

When click on parent, data is getting fetched and but not getting binded/displayed on the grid on the modal window. Not sure what am I missing here.

I've tried the following so far...

Parent:

function ParentWindow(props)
{
const[detailsData,setDetailsData] = React.useState();

function myCallBack()
{
   //Fetch data using REST API...   
   setDetailsData(data);
}

<MyDetailsData show={isOpen} detailsData={detailsData} title={}> </MyDetailsData>

}

Modal:
function MyDetailsData(props)
{
const[detailsData,setDetailsData] = React.useState(props.detailsData)<MyDetailsData


const getDetails = (params) =>
{
//Fetch data using REST API
...
...
const data = ....
setDetailsData(data)

}

const columnInfo= [
{
....
}
];

<Button value="Submit" onClick={getDetails}>

<Modal...>
....
<AgGridReact rowData={detailsData} columnDefs={columnInfo}..></AgGridReact>

</Modal>

}
ag-grid reactjs
1 Answers

Thank you for your help! I was able to resolve this issue by:

  1. Using gridData attribute on the parent window for e.g.

    <MyModalWindow title={myTitle} gridData={myGridData} lt;/MyModalWindow>

  2. Using gridOptions.api.setRowData(myData) in the modal window, in the button click event function.

Using these two options, data is now visible on my ag-grid in the modal window, both when user comes from Parent window to Modal window and when user clicks on the submit button on the Modal window itself.

user_116617370
Related