Ag grid - Modal popup to edit row - Angular

manikandan r

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?

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Jayraj Chhaya2y ago
Accepted 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:
1. 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.
2. 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.
3. 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.
4. 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.
5. In the modal popup component, display the row data in input fields or any other appropriate form elements for editing.
6. 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 Raveendran2y ago

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: '',
})
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: `
    
      
      
      
    
  `,
})
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.