Ag-Grid Cellrender With Button Click

Ag- grid button click doesnt work inside cell

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.

ag-grid buttonrenderer non-static label for each button

You can just simply use valueGetter method of the Ag-grid.

We can render the value for the particular column based on it's field value. Please try to change your code something like below,

 columnDefs = [
    {
      headerName: 'Button Col 1',
      cellRenderer: 'buttonRenderer',
      valueGetter: (params) => this.displayColumnLabel(params.data.fieldName)
      cellRendererParams: {
        onClick: this.onBtnClick1.bind(this),
        label: 'Click 1'
      }
    },
   ...
   ];

  displayColumnLabel(fieldValue) {
    if(fieldValue) {
      return fieldValue; // do something you want to do with value (modifications)
    }
    return 'some default text or value';
  }

Happy Coding.. :)

Ag-grid button in cell that directs to new screen

Create a component and navigate to it with input data.
There are many ways for transforming data between components.

Read this article

In your sample demo you should define route with an id and navigate to it's component then call an api to fetch the data.

Also you can open a modal to show the data instead.
Example:

 CellUpdate(params){
      
        if (params.colDef.field === "changeSettings"){
          const modalRef = this.modalService.open(YourEditComponent);
          modalRef.componentInstance.data= params;   
        }
    }

Ag-grid how to update cell style by clicking a button

I have'nt tested but I believe its something like this; set buttonClicked to true on button click.

const gridOptions = {
    ....
    context: {
        buttonClicked: false
    }
};

In the columnDef:

cellStyle: params => params.context.buttonClicked && params.value > 80 ? 
    { border: '1px solid #165a9f' } : { border: 'whatever it is before the button is clicked' }

---

Related Topics