Issue
I am using AG Grid and angular 14.
I have a column with a cell renderer, this column has a button which triggers a file upload. When an upload of a file is successful, the button should be disabled. The process works fine, except that the grid is not updating, unless i refresh the browser.
I have tried using the various ways of updating the grid using the grid api, refreshing cells and resetting the grid options.
below is my component code:
@Component({
selector: 'invoice-overview',
templateUrl: './invoice.component.html',
styleUrls: ['./invoice.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class InvoiceComponent implements OnInit, OnDestroy {
invoiceResponse: Invoice[] = [];
invoiceSearchSubscription: Subscription = new Subscription();
destroy$ = new Subject<void>();
gridOptions: GridOptions = {
context: { componentParent: this },
};
gridApi: GridApi | undefined;
constructor(
private invoiceService: InvoiceService
) {}
ngOnInit(): void {
this.invoiceSearchSubscription = this.invoiceService.invoiceResponse$().subscribe((invoiceResponse: Invoice[]) => {
this.invoiceResponse = invoiceResponse;
});
}
onGridReady(params: GridReadyEvent): void {
this.gridApi = params.api;
this.gridApi?.showLoadingOverlay();
}
ngOnDestroy(): void {
this.invoiceSearchSubscription.unsubscribe();
}
}
and the cell renderer component:
@Component({
selector: 'document-cell-renderer',
templateUrl: 'document-cell-renderer.component.html'
})
export class DocumentIconCellRendererComponent implements ICellRendererAngularComp {
params!: ICellRendererParams;
constructor(
private documentsService: DocumentsService,
private invoiceService: InvoicesService,
) {}
agInit(params: ICellRendererParams): void {
this.params = params;
}
refresh(params: ICellRendererParams<any>): boolean {
return false;
}
async onFileSelected(event: any, invoice: Invoice): Promise<void> {
let componentParent = this.params.context.componentParent;
const file: File = event.target.files[0];
const response: string = await this.documentsService.handleDocumentUpload(file, invoice.id);
if (response != null && response !== '') {
await this.updateInvoiceResponse(invoice.id, componentParent.invoiceResponse);
}
}
private async updateInvoiceResponse(invoiceId: string, invoiceResponse: Invoice[]): Promise<void> {
const updatedInvoice: invoice = await this.service.SearchSingleInvoice(invoiceId);
const index: number = invoiceResponse.findIndex((responseInvoice: Invoice) => invoiceResponse.id === updatedInvoice.id);
if (updatedInvoice && index !== -1) {
invoiceResponse[index] = updatedInvoice;
this.invoiceService.setSearchInvoicesResponse(invoiceResponse);
}
}
}
and the shared service:
@Injectable({
providedIn: 'root'
})
export class InvoiceService {
private _searchInvoiceResponse: Subject<Invoice[]> = new Subject<Invoice[]>();
invoicesResponse$(): Observable<Invoice[]> {
return this._searchInvoiceResponse.asObservable();
}
setSearchInvoicesResponse(invoices: Invoice[]): void {
this._searchInvoiceResponse.next(invoices);
}
}
Solution
Could you try calling the function setRowData
after setting the value?
private async updateInvoiceResponse(invoiceId: string, invoiceResponse: Invoice[]): Promise<void> {
const updatedInvoice: invoice = await this.service.SearchSingleInvoice(invoiceId);
const index: number = invoiceResponse.findIndex((responseInvoice: Invoice) => invoiceResponse.id === updatedInvoice.id);
if (updatedInvoice && index !== -1) {
invoiceResponse[index] = updatedInvoice;
this.params.api.setRowData('rowData', invoiceResponse); // <- changed here!
this.invoiceService.setSearchInvoicesResponse(invoiceResponse);
}
}
Answered By - Naren Murali
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.