Ag- grid button click doesnt work inside cell

user_11834561 0
Viewed 2320

I demonstrated my real world big project with this tiny stackblitz example.I have ag-grid and all columns are clickable via (cellClicked)="onCellClicked($event)"

<div style="width: 400px;">
    <ag-grid-angular #agGrid style="width: 100%; height: 200px;" class="ag-theme-fresh"
        (cellClicked)="onCellClicked($event)" [gridOptions]="gridOptions" [suppressRowClickSelection]="true">
    </ag-grid-angular>
</div>
  onCellClicked(params) {
    alert("Cell clicked");
  }

I also inserted buttons on last column with buttonRenderer like below

 {
        headerName: "Assign buttons",
        width: 100,
        cellRenderer: this.buttonRenderer
      }

  buttonRenderer(params) {
    return "<button (click)='assign()'>Assign me</button>";
  }
  assign() {
    alert("Assigned");
  }

After all these configuration grid looks like below

enter image description here

Here problem is when buttons on Assign column clicked, method assign() never triggered. Always onCellClicked() triggered and prints "Cell clicked". I went through ag-grid docs and found suppressRowClickSelection but didn't work for me. Also gave stopPropagation to button but didn't work either. How can I trigger clicked button's method assign() when clicked?

Stackblitz : https://stackblitz.com/edit/angular-ag-grid-angular-3ctzvo?file=app%2Fmy-grid-application%2Fmy-grid-application.component.ts

ag-grid angular typescript css javascript
1 Answers

You haven't quite implemented your button correctly. You can't pass a function cellRenderer, you must pass a component that implements the ICellRendererAngularComp interface. So you'll need to create your own custom cell renderer for the button.

Something like this:

@Component({
  selector: 'app-button-renderer',
  template: `
    <button type="button" (click)="onClick($event)">{{label}}</button>
    `
})

export class ButtonRendererComponent implements ICellRendererAngularComp {

  params;
  label: string;

  agInit(params): void {
    this.params = params;
    this.label = this.params.label || null;
  }

  refresh(params?: any): boolean {
    return true;
  }

  onClick($event) {
    if (this.params.onClick instanceof Function) {
      // put anything into params u want pass into parents component
      const params = {
        event: $event,
        rowData: this.params.node.data
        // ...something
      }
      this.params.onClick(this.params);

    }
  }
}

And the params you'll need to this component will be your assign function to tell the button what to call when the button is pressed and the button label:

headerName: "Assign buttons",
width: 100,
cellRenderer: "buttonRenderer",
cellRendererParams: {
  onClick: this.assign.bind(this),
  label: "Click"
}

Lastly, you'll need to tell the grid about this button by passing in the frameworkComponents param like so:

  frameworkComponents = {
      buttonRenderer: ButtonRendererComponent,
    }

and in your html:

[frameworkComponents]="frameworkComponents"

Here is a demo.

user_43006080
Related