I've integrated ag-grid into my project and added a custom cell renderer: https://www.ag-grid.com/javascript-grid-cell-rendering-components/#example-rendering-using-vuejs-components
Although the renderer is working well, I'm facing an issue where I can't access parent grid methods like shown in the example above (i.e.
this.params.context.componentParent.methodFromParent(...);The cell renderer is responsible for customizing cell rendering and interactions:
Template => ActionCellRenderer.vue:
<template>
<span v-if="isPending() && !isConfirmed">
<v-btn v-if="!isAskingForConfirmation"
v-on:click="askForConfirmation"
depressed small
class="button">
<v-icon class="icon">undo</v-icon> Cancel
</v-btn>
<v-btn v-else
v-on:click="confirm"
depressed small
class="button" >
<v-icon class="icon">error_outline</v-icon> Are you sure?
</v-btn>
</span>
</template>
<style>
.button {
margin: 0;
font-size: .72rem;
}
.icon {
font-size: 1.3rem;
}
</style>
<script lang="ts" src="./ActionCellRenderer.ts">
</script>
Logic => ActionCellRenderer.ts :
@Component
export default class ActionCellRenderer extends Vue {
public isAskingForConfirmation = false;
public isConfirmed = false;
isPending(): boolean {
// @ts-ignore
return this.params.value === "Pending";
}
askForConfirmation(): void {
// @ts-ignore
this.isAskingForConfirmation = true;
// @ts-ignore
console.log(this.params);
window.setTimeout(() => {
this.isAskingForConfirmation = false;
}, 3000);
}
confirm(): void {
alert("Confirmed!");
this.isConfirmed = true;
}
}
The parent grid:
Template => CashoutRecords.vue:
<template>
<ag-grid-vue
class="ag-theme-balham"
domLayout="autoHeight"
:columnDefs="columnDefs"
:defaultColDef="defaultColDef"
:frameworkComponents="frameworkComponents"
:rowData="cashoutRecords"
:gridOptions="gridOptions"
@grid-ready="onGridReady"
></ag-grid-vue>
</template>
<style>
.ag-row .ag-cell {
display: flex;
align-items: center;
}
</style>
<script lang="ts" src="./CashoutRecords.ts">
</script>
Logic => CashoutRecords.ts:
@Component({
components: {
AgGridVue,
},
})
export default class CashoutRecords extends Vue {
@NS.Action(Actions.fetchCashouts) fetchCashouts!: ActionTypes.fetchCashouts;
@NS.Action(Actions.fetchCompanies) fetchCompanies!: ActionTypes.fetchCompanies;
@NS.Getter(Getters.cashoutRecords) cashoutRecords!: GetterTypes.cashoutRecords;
gridOptions: GridOptions = {
rowHeight: 45,
};
frameworkComponents = {
actionCellRenderer: ActionCellRenderer,
};
columnDefs: ColDef[] = [
{
headerName: "",
filter: true,
pinned: "right",
field: "state.name",
width: 130,
resizable: true,
cellRenderer: "actionCellRenderer",
},
{ headerName: "Date", field: "createdOn", valueFormatter: this.dateTimeFormatter, width: 150, resizable: true },
{ headerName: "Recipient", field: "recipient", resizable: true },
{ headerName: "Amount", field: "amount", valueFormatter: this.currencyFormatter, width: 110, resizable: true },
{ headerName: "Label", field: "comment", resizable: true },
{ headerName: "State", field: "state.name", width: 100, resizable: true },
{ headerName: "Created by", field: "createdBy", resizable: true },
];
defaultColDef = { filter: true };
private gridApi!: GridApi;
mounted() {
if (this.gridOptions.api) {
this.gridApi = this.gridOptions.api;
}
}
async onGridReady() {
await this.loadCashoutRecords();
}
async loadCashoutRecords() {
this.gridApi.showLoadingOverlay();
await Promise.all([
this.fetchCompanies(),
this.fetchCashouts(),
]);
if (this.cashoutRecords.length === 0) {
this.gridApi.showNoRowsOverlay();
} else {
this.gridApi.hideOverlay();
}
}
private methodFromParent(cell: any) {
alert("Parent Component Method from " + cell + "!");
}
private currencyFormatter(params: ValueFormatterParams) {
return toCurrency(params.value);
}
private dateTimeFormatter(params: ValueFormatterParams) {
return toDateTime(params.value);
}
}
When calling console.log(this.params); within the askForConfirmation method, the 'context' field doesn't appear:
Object
$scope = null
addRenderedRowListener = function (eventType, listener) {
...
Is there a way to access the grid method methodFromParent from the cell renderer?