React ag-grid OnGridReady setRowData is null - how to load data before OnGridReady get called?

user_3271612 0
Viewed 1810

I am using useEffect hook to call my data api and AgGrid onGridReady to populate the data. problem i have is when i use setRowData first time to populate AgGrid, orderData is null.problem seem to have that setRowData get called before order data is fetched via api and set. (i dont want to use timeout option as it's not a feasible option in my case)

is there a way that onGridReady setRowData can be called after my grid is loaded (post hook is called). currently it only works if i refresh (i have a refresh function that call gridApi.setRowData again and this time it works)

this is my orderdata states and ag-grid-react component

    const [orderData, setOrderData] = useState([]);
    const [gridApi, setGridApi] =useState(null);



    const onGridReady = params => {
    setGridApi(params.api);
    params.api.setRowData(orderData);//this is null which i want not null
    params.api.sizeColumnsToFit();
};

hook to fetch data and retrieveOrderByBondID will set the orderDataState

useEffect(() => {
    retrieveOrdersByBondId(props.Id);

}, [props.Id]);



                <AgGridReact
                enableCellChangeFlash={true}
                columnDefs={columns}
                onGridReady={onGridReady}
            />
ag-grid-react ag-grid react-hooks reactjs
2 Answers

I had the same issue and it was because AG Grid's gridApi wasn't ready on first render, so just used ?. instead of . and it got fixed. So in your case do:

gridApi?.setRowData(orderData);
user_98684450

You should be calling params.api.setRowData(orderData); in the effect that will fire when your orderData is ready, not when the grid is ready: 

useEffect(() => { gridApi.setRowData(orderData) } , [orderData]);

In the case you mentioned where you're refreshing to set the data, it's likely that your orderData has loaded at that point, and setting it will work fine.

user_55743780
Related