javascript – Ag-Grid cellRender with Button Click

javascript – Ag-Grid cellRender with Button Click

You can use cellRenderer with a button component.
If you want to get the click event on the button from the user on the table, just declare the callback function you want to cellRendererParams.

// app.component.ts
columnDefs = [
{
  headerName: Button Col 1,
  cellRenderer: buttonRenderer,
  cellRendererParams: {
    onClick: this.onBtnClick.bind(this),
    label: Click
  }
},
...
]

The above code is just a small part, check out full example on Stackblitz

Angular.
Here we create the button cell renderer as an Angular component that implements the ICellRendererAngularComp interface. Access to the params object can be found on the agInit hook.

// app/button-cell-renderer.component.ts
@Component({
  selector: btn-cell-renderer,
  template: `
    <button (click)=btnClickedHandler($event)>Click me!</button>
  `,
})
export class BtnCellRenderer implements ICellRendererAngularComp, OnDestroy {
  private params: any;
  agInit(params: any): void {
    this.params = params;
  }
  btnClickedHandler() {
    this.params.clicked(this.params.value);
  }
  ngOnDestroy() {
    // no need to remove the button click handler as angular does this under the hood
  }
}

The renderer is registered to ag-Grid via gridOptions.frameworkComponents. Note that we’re passing the button click handler dynamically to our renderer via cellRendererParams – allowing for a more flexible and reusable renderer.

// app/app.component.ts
this.columnDefs = [
    {
        field: athlete,
        cellRenderer: btnCellRenderer,
        cellRendererParams: {
          clicked: function(field: any) {
            alert(`${field} was clicked`);
          }
        },
        minWidth: 150,
    }
    // [...]
];
this.frameworkComponents = {
    btnCellRenderer: BtnCellRenderer
};

It is also necessary to pass our renderer to our @NgModule decorator to allow for dependency injection.

// app/app.modules.ts
@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    AgGridModule.withComponents([BtnCellRenderer]),
  ],
  declarations: [AppComponent, BtnCellRenderer],
  bootstrap: [AppComponent],
})

See demo.
Learn more about Angular Cell Renderer.

Vanilla JavaScript.
A DOM element is created in the init method, which is then returned in the getGui method. The optional destroy hook has also included to do some cleanup (removing the click listener from our component).

// btn-cell-renderer.js
function BtnCellRenderer() {}
BtnCellRenderer.prototype.init = function(params) {
  this.params = params;
  this.eGui = document.createElement(button);
  this.eGui.innerHTML = Click me!;
  this.btnClickedHandler = this.btnClickedHandler.bind(this);
  this.eGui.addEventListener(click, this.btnClickedHandler);
}
BtnCellRenderer.prototype.getGui = function() {
  return this.eGui;
}
BtnCellRenderer.prototype.destroy = function() {
  this.eGui.removeEventListener(click, this.btnClickedHandler);
}
BtnCellRenderer.prototype.btnClickedHandler = function(event) {
  this.params.clicked(this.params.value);
}

The renderer is registered to ag-Grid in gridOptions.components and is used on the athlete column. Note that we’re passing the button click handler dynamically to our renderer via cellRendererParams – this makes for a more flexible and reusable renderer.

// main.js 
var gridOptions = {
  columnDefs: [
    { 
      field: athlete, 
      cellRenderer: btnCellRenderer, 
      cellRendererParams: {
        clicked: function(field) {
          alert(`${field} was clicked`);
        }
      },
      minWidth: 150
    },
  // [...]
  components: {
    btnCellRenderer: BtnCellRenderer
  }
};

See demo.
Learn more about JavaScript Cell Renderers.

React.
Here our button cell renderer is constructed as a React component. The only thing to take note of here is that cell params will be available on the component via props.

// BtnCellRenderer.jsx
class BtnCellRenderer extends Component {
  constructor(props) {
    super(props);
    this.btnClickedHandler = this.btnClickedHandler.bind(this);
  }
  btnClickedHandler() {
   this.props.clicked(this.props.value);
  }
  render() {
    return (
      <button onClick={this.btnClickedHandler}>Click Me!</button>
    )
  }
}

The renderer is registered to ag-Grid via gridOptions.frameworkComponents. The button click handler is passed to our renderer at run time via cellRendererParams – allowing for a more flexible and reusable renderer.

// index.jsx
columnDefs: [
    {
          field: athlete,
          cellRenderer: btnCellRenderer,
          cellRendererParams: {
            clicked: function(field) {
              alert(`${field} was clicked`);
            },
          },
        // [...]
    }
];
frameworkComponents: {
    btnCellRenderer: BtnCellRenderer,
}

See demo.
Learn more about React Cell Renderers.

Vue.js.
Configuring the renderer in Vue.js is simple:

// btn-cell-renderer.js
export default Vue.extend({
  template: `
        <span>
            <button @click=btnClickedHandler()>Click me!</button>
        </span>
    `,
  methods: {
    btnClickedHandler() {
      this.params.clicked(this.params.value);
    }
  },
});

As with the other frameworks, the renderer is registered to ag-Grid via gridOptions.frameworkComponents and the button click handler is passed to our renderer at run time via cellRendererParams – allowing for a more flexible and reusable renderer.

// main.js
    this.columnDefs = [
      {
        field: athlete,
        cellRenderer: btnCellRenderer,
        cellRendererParams: {
          clicked: function(field) {
            alert(`${field} was clicked`);
          }
        },
      // [...]
    ],
    this.frameworkComponents = {
      btnCellRenderer: BtnCellRenderer
    }

See demo.
Learn more about Vue.js Cell Renderers.

Read the full blog post on our website or check out our documentation for a great variety of scenarios you can implement with ag-Grid.

Ahmed Gadir | Developer @ ag-Grid

javascript – Ag-Grid cellRender with Button Click

To expand on the answer from @T4professor, I will post some code to also have a dynamic label on that Click button.

// Author: T4professor

import { Component, OnInit, AfterContentInit } from @angular/core;
import { ICellRendererAngularComp } from ag-grid-angular;

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

export class ButtonRendererComponent implements ICellRendererAngularComp {
    //https://stackblitz.com/edit/angular-ag-grid-button-renderer?file=src%2Fapp%2Fapp.component.ts
  params: any;
  label: string;
  getLabelFunction: any;
  btnClass: string;

  agInit(params: any): void {
    this.params = params;
    this.label = this.params.label || null;
    this.btnClass = this.params.btnClass || btn btn-primary;
    this.getLabelFunction = this.params.getLabelFunction;

    if(this.getLabelFunction && this.getLabelFunction instanceof Function)
    {
      console.log(this.params);
      this.label = this.getLabelFunction(params.data);
    }

  }

  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(params);

    }
  }
}

Then, in the component with the grid you do the following:

columnDefs = [

    {
      headerName: Publish,
      cellRenderer: buttonRenderer,
      cellRendererParams: {
        onClick: this.onRowPublishBtnClick.bind(this),        
        label: Publish,
        getLabelFunction: this.getLabel.bind(this),
        btnClass: btn btn-primary btn-sm
      }
    }  
]

onRowPublishBtnClick(e) {    
    this.rowDataClicked = e.rowData;
  }

  getLabel(rowData)
  {    
    console.log(rowData);
    if(rowData && rowData.hasIndicator)
      return Republish;
      else return Publish;
  }

Leave a Reply

Your email address will not be published.