Я использую ag-grid для отображения данных. Но не все данные в сетке взяты из rowData, который я передаю в gridAPI.
Один из столбцов рассчитывается на основе данных строки и другого набора данных. Сетка также имеет кнопку редактирования при нажатии, появляется диалоговое окно, где пользователь может изменить одно из значений и сохранить на сервере. Когда действие сохранения завершено, диалоговое окно закрывается и управление передается в Grid, но ячейка Grid не обновляется. Я знаю, почему сетка не освежает. причина, по которой я передаю rowData, не обновляется напрямую, но изменился другой набор данных, на основе которого я вычислил одно из значений столбца. Мой код ниже. Если вы видите метод getDefaultMArketName, который используется как valueGetter для второго столбца. это приводит к тому, что сетка не обновляется. Есть указатели?
type Props = {
companiesWithMarket: any;
defaultMarkets:any;
editMyPreferences?:(companyWithMarket:any)=>void;
}
type State = {
}
export class MyGrid extends React.PureComponent<Props, State> {
static contextTypes = {
menuController: PropTypes.object.isRequired,
clipboardService: PropTypes.object.isRequired,
};
getColumns = memoizeOne( (editMyPreferences): Array<ColDef> =>{
return [
{headerName: 'Company', field: 'companyName', width: 500, cellClass:
"fullText", autoHeight: true},
{headerName: 'Default Market', valueGetter: this.getDefaultMarketName,
width: 500, cellClass: "fullText", autoHeight: true},
{headerName: 'Edit', width: 80,
cellRenderer:'renderer_myPreferencesEdit',
cellRendererParams:{
editMyPreferences:editMyPreferences
}
}
];
})
private static gridComponents = {
'renderer_myPreferencesEdit':CellRenderer_EditMyPreferences
};
getDefaultMarketName = (params) => {
let defaultMarkets= this.props.defaultMarkets;
let marketName ,i;
for (i = 0; i < defaultMarkets.length; i++) {
if (params.data.companyId === defaultMarkets[i].companyId) {
marketName = defaultMarkets[i].marketName;
return marketName;
}
else {
marketName = "";
}
}
return null;
};
render(){
const {companiesWithMarket,editMyPreferences,defaultMarkets} =
this.props;
const columnDefs = this.getColumns(editMyPreferences);
return (
<div className={cx(flexAgGridContainerCss)}>
<AgDataGrid
columnDefs={columnDefs}
frameworkComponents={MyGrid.gridComponents}
suppressMovableColumns
suppressCellSelection
suppressRowHoverHighlight
rowData={companiesWithMarket}
deltaRowDataMode
getRowNodeId={MyGrid.getRowNodeId}
onGridReady={MyGrid.onGridReady}
onGridSizeChanged={MyGrid.onGridSizeChanged}
onColumnResized={MyGrid.onColumnResized}
onCellContextMenu={this._onContextMenu}
/>
</div>
);
}
private static onGridReady(params) {
const gridApi = params.api;
gridApi.sizeColumnsToFit(); // for * size columns
}
private static onGridSizeChanged(params) {
const gridApi = params.api;
gridApi.sizeColumnsToFit(); // for * size columns
}
private static onColumnResized(params) {
const gridApi = params.api;
gridApi.resetRowHeights(); // for autoHeight...
}
//this is used to update only one row value instead of updating the
whole
grid. fast performance
private static getRowNodeId(data: CompanyDTO) {
return ''+data.companyId + ','+ data.companyId;
}
//private refreshCells(params){
// let defaultMarkets = this.props.defaultMarkets;
// const gridApi = params.api;
//}
_onContextMenu: (agEvent: CellContextMenuEvent) => void =
createOnGridContextMenu(this,
MyPreferencesGrid.gridComponents,
null,
true);
}