In my grid setup, I have implemented an editor button in a column for each row and a new item creator button outside the grid.
One of the requirements is that all buttons should be disabled when either the create or edit button is clicked.
To achieve this, I created a custom cell renderer for the edit button with a property controlling the disabled state. However, I faced difficulty updating this property from outside the grid context.
The solution I found was to pass the isDisabled state as a function to the cell renderer, encapsulating the external value and utilizing Angular's expression handling in templates. Although this approach may lead to constant evaluation by Angular due to the non-deterministic nature of the value, it eventually updates as the wrapped external value changes.
For convenience, I have provided a sample at this link.
@Component({
selector: 'app-ag-grid-edit-renderer',
template: `
<button
class="ag-edit-button"
(click)="onClick()"
[disabled]="isDisabled()"
>
Edit
</button>`,
})
export class AgGridEditRendererComponent implements AgRendererComponent {
private params: any;
isDisabled = () => false; // avoid this bad practice of constant evaluation
agInit(params: any): void {
this.params = params;
this.isDisabled = params.isDisabled;
}
refresh(): boolean {
return false;
}
onClick() {
this.params.clicked(this.params.data);
}
}
The grid setup includes:
export class AppComponent {
isDisabled = false;
currentVal: number | string = 0;
columnDefs = [
{ field: "id",
cellRendererFramework: AgGridEditRendererComponent,
cellRendererParams: {
isDisabled: () => this.isDisabled,
clicked: (params) => this.openEdit(params.id)
}
},
{ field: "make" }, { field: "model" }, { field: "price" }
];
rowData = [
{ id: 1, make: "Toyota", model: "Celica", price: 35000 },
{ id: 2, make: "Ford", model: "Mondeo", price: 32000 },
{ id: 3, make: "Porsche", model: "Boxter", price: 72000 }
];
openNew() {
this.isDisabled = true;
this.currentVal = 'new item';
}
openEdit(val: any) {
this.isDisabled = true;
this.currentVal = val;
}
closeDialog() {
this.isDisabled = false;
}
}
I attempted various methods to trigger cell or row refresh using the Grid API without success.
While considering options like using an Observable, I felt it would be too complex for this scenario.
Since this is a general cell renderer, simplicity is key, making solutions like extending the data model with special properties impractical.