Triggering "cellValueChanged" event in Angular AG Grid custom renderer component on select change

ONLINECAST

3 min read

·

04-10-2024

8

0

Share

Triggering the "cellValueChanged" Event in Angular AG Grid Custom Renderers

Angular AG Grid provides powerful capabilities for customizing your data grids. One common task is to create custom renderers for cells, giving you complete control over how data is displayed and interacted with. However, triggering the cellValueChanged event from within a custom renderer can sometimes be a bit tricky. Let's delve into this problem, explore solutions, and empower you to effectively update your grid data.

The Problem:

Imagine you have a dropdown within your custom renderer, allowing users to select different values. You want the grid cell to reflect the selected value and also trigger the cellValueChanged event, updating the underlying data source. However, directly emitting this event from the renderer might not work as expected.

Scenario:

Consider a simple example with a custom renderer for a "Status" column in an AG Grid. The renderer includes a dropdown with options "Pending," "InProgress," and "Completed." We want the cellValueChanged event to be triggered when the user selects a different status.

import { Component, Input } from '@angular/core';
import { ICellRendererAngularComp } from 'ag-grid-angular';

@Component({
  selector: 'app-status-renderer',
  template: `
    <select [(ngModel)]="status" (ngModelChange)="onStatusChange()">
      <option value="Pending">Pending</option>
      <option value="InProgress">In Progress</option>
      <option value="Completed">Completed</option>
    </select>
  `
})
export class StatusRendererComponent implements ICellRendererAngularComp {
  @Input() value: string;
  status: string;

  agInit(params: any): void {
    this.status = this.value;
  }

  refresh(params: any): boolean {
    return false;
  }

  onStatusChange() {
    // This should trigger the 'cellValueChanged' event 
    // but it doesn't work as intended.
  }
}

The Issue:

The problem is that the cellValueChanged event is not automatically triggered by changes within a custom renderer. This event is typically managed by AG Grid itself, responding to actions like editing a cell directly.

Solution:

To trigger the cellValueChanged event from your custom renderer, you need to explicitly inform AG Grid about the change. You can achieve this by using the params.api.setFieldValue() method within your renderer.

Modified Code:

import { Component, Input } from '@angular/core';
import { ICellRendererAngularComp } from 'ag-grid-angular';

@Component({
  selector: 'app-status-renderer',
  template: `
    <select [(ngModel)]="status" (ngModelChange)="onStatusChange()">
      <option value="Pending">Pending</option>
      <option value="InProgress">In Progress</option>
      <option value="Completed">Completed</option>
    </select>
  `
})
export class StatusRendererComponent implements ICellRendererAngularComp {
  @Input() value: string;
  status: string;
  @Input() params: any; // Access the AG Grid parameters

  agInit(params: any): void {
    this.params = params; 
    this.status = this.value;
  }

  refresh(params: any): boolean {
    return false;
  }

  onStatusChange() {
    this.params.api.setFieldValue(this.params.node.rowIndex, this.params.column.colId, this.status);
  }
}

Explanation:

1. Accessing AG Grid Parameters: We inject the params object into the renderer component using the @Input() decorator. This object provides access to various AG Grid context, including the cell's row index (rowIndex), the column ID (colId), and the grid's API (api).

2. Setting the Value: In the onStatusChange() method, we call params.api.setFieldValue() to update the cell value in the grid. This method takes three arguments: the row index, column ID, and the new value.

3. Triggering the Event: The setFieldValue() method internally handles updating the grid and triggers the cellValueChanged event, signaling the change to the grid and any listeners.

Additional Notes:

• Data Source Update: It's important to note that the cellValueChanged event is primarily meant for updating the grid's visual representation. To update the underlying data source (your backend or data store), you'll need to implement additional logic to synchronize the change.

• Data Binding: If you are using Angular's two-way data binding ([(ngModel)]), ensure that the value in your component's property is also correctly updated, as this is crucial for synchronization with the grid.

Benefits:

• Real-time Updates: The cellValueChanged event ensures that the grid reflects the selected value immediately, providing a seamless user experience.
• Data Consistency: By updating the data source, you ensure that the grid's displayed data is consistent with the underlying data.
• Custom Logic: You can customize the behavior of the cellValueChanged event in your Angular component to perform additional operations, such as updating the backend data or triggering other actions.

Conclusion:

By understanding the role of the cellValueChanged event and leveraging the setFieldValue() method within your custom renderers, you can effectively trigger this event to update both the grid's visual representation and the underlying data source. This empowers you to create highly interactive and responsive user experiences with Angular AG Grid.