Dynamically change headerName ag-grid Angular 2?
Valitskiy Dmitriy
I have the following code:
public fy: string = "17";
let months = ['July', 'August', 'September', 'October', 'November', 'December', 'January', 'February', 'March', 'April', 'May', 'June',];
function headerCellRendererFunc(year, params) {
const eHeader = document.createElement('span');
eHeader.innerText = `${params.colDef.headerName} ${year}`;
return eHeader;
}
const januaryIndex = months.indexOf('January');
months.map((month, index, arr) => {
const year = januaryIndex === 0 || index > januaryIndex ? this.fy : this.fy + 1;
return <ColDef>{
headerName: month,
headerCellRenderer: headerCellRendererFunc.bind(null, year),
field: `data.${month}`,
editable: isEditable,
valueGetter: cellMonthValueGetter(month, index),
cellFormatter: cellMonthValueFormatter,
newValueHandler: cellMonthNewValueHandler(month),
width: 100,
};
}).forEach((colDef) => colDefs.push(colDef));
and this function:
refresh(): void {
let jobId = +this.route.snapshot.parent.params['id'];
this.jobService.getJob(jobId).then(result => {
this.job = result.Object;
this.fy = result.Object.FinancialYearName;
this.jobService.getTimePhasing(jobId).then(result => {
this.setModel(result.Object);
});
});
}
As you can see, the FY mod will be changed after request. How can I change it in the column? I tried calling the grid rendering function again ( this.gridOptions.api.refreshView(); ), but it didn't help me.
Muni Chittem
Header names can be assigned dynamically after data binding to the grid in the GridReady event.
this.gridOptionsDetail.api.getColumnDef("params_1").headerName = "Files Count (" + fileCount + )";
this.gridOptionsDetail.api.refreshHeader();
//column def
this.columnDefs = [
{
headerName: "Test Columns",
field: "test1",
cellStyle: { 'text-align': 'left' },
suppressSorting: true,
minWidth: 250,
ColId:"params_1"
}];
params_1 is the column key, not the column name.