I am creating a checkbox component in a detail grid which needs to be disabled if a column value in the parent node is false.
import { Component, OnDestroy } from '@angular/core';
import { ICellRendererAngularComp } from '@ag-grid-community/angular-legacy';
import { ICellRendererParams } from '@ag-grid-community/core';
@Component({
// tslint:disable-next-line: component-selector
selector: 'checkboxRenderer',
template: `
<input
type="checkbox"
(click)="checkedHandler($event)"
[disabled]="!params.column.isCellEditable(params.node)"
[checked]="params.value"
/>
`,
})
export class CheckboxRenderer implements ICellRendererAngularComp, OnDestroy {
params: ICellRendererParams ;
isEditable: boolean = false;
needRefresh = true;
agInit(params: ICellRendererParams): void {
this.params = params;
}
checkedHandler(event: MouseEvent): void {
const checked = (<HTMLInputElement>event.target).checked;
const colId = this.params.column.getColId();
const isEditable = this.params.column.isCellEditable(this.params.node);
if (isEditable) {
this.params.node.setDataValue(colId, checked);
this.needRefresh = true;
}
}
refresh(_params: any): boolean {
const r = this.needRefresh;
this.needRefresh = false;
return r;
}
ngOnDestroy(): void {}
}
in my detailGridOptions I created a columnTypes 'billing' and created a function to define if the field is editable
detailGridOptions: {
columnTypes: {
billing: {
editable: (params: EditableCallbackParams) => {
const invoice = params.node.parent.data;
/*** the params.node.parent doesn't have a data ***/
return !invoice.approved;
},
}
},
frameworkComponents: {
checkbox: CheckboxRenderer,
currency: CurrencyComponent,
},
columnDefs: [
{ field: 'name', headerName: 'Name' },
{ field: 'billable', headerName: 'Billable', type: 'billing', cellRenderer: 'checkbox', onCellValueChanged: this.onToggleDetailBillable.bind(this), },
]
}
My question how do I retrieve the parent node data from the detailGridOptions. I am using those packages since I am still running angular 8.2.2
"@ag-grid-community/angular-legacy": "^28.1.1",
"@ag-grid-community/client-side-row-model": "^27.3.0",
"@ag-grid-community/core": "^27.3.0",
"@ag-grid-community/infinite-row-model": "^27.3.0",
"@ag-grid-enterprise/core": "^27.3.0",
"@ag-grid-enterprise/master-detail": "^27.3.0",
"@ag-grid-enterprise/menu": "^27.3.0",
"@ag-grid-enterprise/row-grouping": "^27.3.0",
"@ag-grid-enterprise/status-bar": "^27.3.0",
Thanks
Pascal