Estoy tratando de usar la documentación para agregar contexto a mi aplicación React Ag Grid. Mi problema es que su ejemplo de código no usa la forma en que creo la cuadrícula. Así es como agregan el contexto.
var gridOptions = { columnDefs: columnDefs, defaultColDef: { flex: 1, resizable: true }, rowData: rowData, context: { reportingCurrency: 'EUR' }, }; // setup the grid after the page has finished loading document.addEventListener('DOMContentLoaded', function() { var gridDiv = document.querySelector('#myGrid'); new agGrid.Grid(gridDiv, gridOptions); });
Y cambian el valor de contexto así
function currencyChanged() { var value = document.getElementById('currency').value; gridOptions.context = {reportingCurrency: value}; gridOptions.api.refreshCells(); gridOptions.api.refreshHeader(); }
Sin embargo, estoy usando React, así que estoy creando mi componente así
const [gridParams, setGridParams] = useState(null); const onFirstDataRendered = (params) => { setGridParams(params) } <AgGridReact columnDefs={columnDefs} defaultColDef={{ flex: 1, resizable: true }} rowData={rowData} context={{ reportingCurrency: 'EUR' }} onFirstDataRendered={onFirstDataRendered} >
Así es como estoy cambiando el contexto en mi archivo
const currencyChange = (value) => { gridParams.context = { reportingCurrency: value }; gridParams.api.refreshCells(); };
Cuando actualizo el contexto de esta manera, mis celdas no ven que el contexto ha cambiado para ellas. Dado que la documentación no muestra cómo implementar esto para React, pensé que me faltaba algo. ¿Alguien tiene alguna idea de lo que podría ser?
Parece que la forma de cambiar el contexto es en realidad diferente. Después de hurgar, parece que necesita ser cambiado así
const currencyChange = (value) => { gridParams.api.gridOptionsWrapper.gridOptions.context = { reportingCurrency: value }; gridParams.api.refreshCells(); };