Ag grid - Modal popup to edit row - Angular

Question

I am using Ag-grid component. I want to edit the row data in a modal popup from cellRenderer image icon or a button. any help?

Jayraj Chhaya · Answer

To edit row data in a modal popup from a cellRenderer image icon or a button in Ag-Grid, you can follow these steps: Create a custom cellRenderer component that includes the image icon or button for editing the row data. This component will be responsible for rendering the cell content and handling the click event. In the custom cellRenderer component, define a click event handler that opens the modal popup for editing the row data. You can use a library like Angular Material to create the modal popup. Pass the necessary row data to the custom cellRenderer component as a parameter. This can be done using the params object provided by Ag-Grid. In the click event handler of the custom cellRenderer component, open the modal popup and pass the row data to it. You can use Angular Material's MatDialog service to open the modal popup. In the modal popup component, display the row data in input fields or any other appropriate form elements for editing. Implement the necessary logic to update the row data when the user saves the changes in the modal popup. This can be done by emitting an event from the modal popup component and handling it in the parent component where the Ag-Grid is located. Here's an example of how the custom cellRenderer component could be implemented: import { Component } from '@angular/core'; @Component({ selector: 'app-custom-cell-renderer', template: ` `, }) export class CustomCellRendererComponent { params: any; agInit(params: any): void { this.params = params; } openModal(): void { // Open the modal popup and pass the row data // using Angular Material's MatDialog service } } Remember to register the custom cellRenderer component in your module's declarations array and use it in the column definition of Ag-Grid. By following these steps, you should be able to edit row data in a modal popup from a cellRenderer image icon or a button in Ag-Grid.

Prasad Raveendran · Answer

Create a component for the edit button. // edit-button.component.ts import { Component, EventEmitter, Input, Output } from '@angular/core'; @Component({ selector: 'app-edit-button', template: ' Edit ', }) export class EditButtonComponent { @Input() rowData: any; @Output() editClick = new EventEmitter (); onEditClick(): void { this.editClick.emit(this.rowData); } } Create a component for the edit modal. // edit-modal.component.ts import { Component, EventEmitter, Input, Output } from '@angular/core'; @Component({ selector: 'app-edit-modal', template: ` Save Cancel `, }) export class EditModalComponent { @Input() rowData: any; @Output() save = new EventEmitter (); @Output() cancel = new EventEmitter (); onSave(): void { // Implement logic to save edited data this.save.emit(/* pass edited data */); } onCancel(): void { this.cancel.emit(); } } Integrate the button and modal components into your Angular component that uses Ag-Grid. // your-grid-component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-your-grid', template: ` `, }) export class YourGridComponent { private gridApi; gridOptions = { columnDefs: [ // Other columns { headerName: 'Edit', cellRendererFramework: EditButtonComponent, cellRendererParams: { editClick: (row) => this.onEditClick(row), }, }, ], // Other grid options }; rowData: any[] = []; // Set your row data here showModal = false; selectedRow: any; onGridReady(params): void { this.gridApi = params.api; } onEditClick(row): void { this.selectedRow = row; this.showModal = true; } onSave(editedData): void { // Implement logic to save edited data // Update the rowData array or make API calls this.showModal = false; } onCancel(): void { this.showModal = false; } } Make sure to replace the placeholders with your actual implementation details. This example assumes you are using Angular with Ag-Grid. Adjustments may be necessary based on your specific use case and project structure.