Ahmed Mohamed Ahmed Mohamed - 1 month ago 12
TypeScript Question

refreshCells Not working in Ag-Grid - Angular 2

I've a Angular 2 project (2.0.0-RC.4) and running ag-grid (5.0.1).

I'm trying to use refreshCells() method to refresh a specific cells in the grid, without reset rows.

I saw a sample in Ag-Grid documentation, that show how to use refreshCells()

https://www.ag-grid.com/javascript-grid-refresh/

I tried to create a copy of it that expected to fit my needs, but it's not working.

The grid refuse to refresh cells.

ChangeValue() {
var updatedNodes = [];

this.gridOptions.api.forEachNode((rowNode: RowNode) => {
let data = rowNode;

if(data.data.timestamp == "t") {
data.data.asset *= 2;
updatedNodes.push(rowNode);
}
});
console.log(updatedNodes);
this.gridOptions.api.refreshRows(updatedNodes);
this.gridOptions.api.refreshView();
}


The method I showed above is linked to a button, so once I click the button It should increase asset inside the rowNode which matches timestamp "t".

For more detail, the hook and constructor below are used to add data sample to the grid and create columnDefs.

ngAfterViewChecked() {

let dataSample: any[] = [
{
timestamp: "t",
asset: 100
}
]

this.gridOptions.api.setRowData(dataSample);
// Hide ag-grid overlay
this.gridOptions.api.hideOverlay();
}

constructor() {
this.columnDefs = [
{
headerName: 'Timestamp',
field: 'timestamp'
}, {
headerName: 'Asset',
field: 'asset'
}
]
}


The issue is once I click on the button, ChangeValue() method runs but not updating cell value for some reason.

Answer

I've found what causes this issue, with help from Ag-Grid team.

I would like to thank them.

refreshRows() causes redraw for view which end with trigger ngAfterViewChecked() that's will reset data in grid.

So the code was running into circles.

Comments