I'm using the community edition of "AG Grid" in my Angular 6 application.
My challenge right now is this: I have a fairly simple data structure, a list of which gets bound to the grid for display. Based on its values, I'd like to add an "Actions" column to the grid, to give the user access to certain actions, e.g. delete an entry, "promote" it etc.
For individual data-bound column, I get the corresponding data value of each row as it's being bound, and I can e.g. format the display using a cell renderer. I was hoping I'd be able to do soemthing similar with my "Actions" column (which isn't bound to a specific data element of the class) - but it seems my "action cell renderer" doesn't get anything to base its decisions on.
I have a data structure something like this:
export interface Indicator {
Id: string;
Name: string;
IsGlobal: boolean;
}
An array of these Indicators
is being bound to the AG-grid in the OnInit
function of my Angular component.
I define my column of the AG-grid to be:
columnDefs = [
{ headerName: 'Name', field: 'Name', width: 200, editable: true },
{ headerName: 'Global', field: 'IsGlobal', editable: false, width: 100,
cellRenderer: (data) => {
// here, "data" refers to the "IsGlobal" value of the row being displayed
if (data.value === true) {
return 'Ja';
} else {
return 'Nein';
}
},
},
{ headerName: 'Actions', width: 125,
cellRenderer: (data) => {
// here, I was hoping the "data" would refer to the entire
// row / object being bound, so that I could check for
// certain conditions to be true (or false)
if (data.IsGlobal.value === true)
{
return '<span class="far fa-trash-alt mr-2" title="Delete entry"></span>' +
'<span class="fab fa-nintendo-switch" title="Promote entry"></span>';
}
else
{
return '<span class="far fa-trash-alt mr-2" title="Delete"></span>';
}
}
}
];
I'd like to be able to define in my column definitions that my action column shows a "promote entry" button only IF the data of the row currently in question has IsGlobal = false
. I was hoping the data
being passed into the cell renderer would be the whole row data object (of type Indicator
) - but that doesn't seem to be the case.
How can I decide which icons to show, in the "Actions" column, in my column definitions?
See Question&Answers more detail:
os