How to add a onclick event in ag-grid cell renderer reactjs and access the class function

Question

I would like to add a button for an ag-grid table column in reactjs at the time column definition. And onclick I need to call a class function. I would like to create onclick event and pass the params value to the function and make an api call from there.

columnDefs = [{
    ..... {
      headerName: "View",
      field: "id",
      sortable: false,
      filter: false,
      colId: "view",
      cellRendererFramework: function(params) {
        return <Button onclick = {
          this.handleClick
        } > Test < /Button>
      },

    },
    ......
  ];
}
handleClick() {
  console.log("some API call and state change");
}



render() {

    return ( <
      div >
      <
      div id = "myGrid"
      style = {
        {
          height: "100%",
          width: "100%"
        }
      }
      className = "ag-theme-material" >
      <
      AgGridReact enableSorting = {
        true
      }
      groupSelectsChildren = {
        true
      }
      rowData = {
        this.state.organization
      }
      columnDefs = {
        this.columnDefs
      }

      onGridReady = {
        this.onGridReady
      } >

      <
      /AgGridReact>

      <
      /div>


    }
    export default OrganizationList;

do you really think asking question like this will help us understand the actual problem? atleast share code what you have tried — Akshay Mulgavkar
– Akshay Mulgavkar, Commented Feb 25, 2019 at 14:23
This worked for me cellRendererFramework: (props) => { return ( <button onClick{this.handleClick.bind(this)>Click</button> } ); } — Santhosh A
– Santhosh A, Commented Mar 5, 2019 at 14:26

Sameer Reza Khan · Accepted Answer · 2019-03-01 13:23:33Z

8

Instead of using cellRenderer in column definition, use cellRendererFramework so agGridReact will know you are returning jsx element.

e.g:

colDefs = [{ ...{
headerName: "View",
field: "id",
colId: "view",
cellRendererFramework: function(params) {
  return <button onClick={ this.handleClick }> Test </button>
},
  },
  ....
}]

also don't forget to bind the cell renderer function to your component class constructor else you will not be able to access this.

edited Mar 1, 2019 at 13:23

answered Mar 1, 2019 at 10:04

Sameer Reza Khan

4795 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

Santhosh A Over a year ago

TypeError: Cannot read property 'handleClick' of undefined Getting this error. made the changes as u said, let me know if i'm wrong.

const columnDefs = [{       {         ....         {           headerName: "View",           field: "id",           colId: "view",           cellRendererFramework: function(params) {             return <Button onclick={this.handleClick}> View </Button>           }           .....         ];   class Test extends React.Component {      constructor(props) {        super(props)        this.handleClick = this.handleClick.bind(this);       }

Sameer Reza Khan Over a year ago

handleclick is not bind to your component class. Add this line inside constructor before this.state, this.handleClick = this.handleClick.bind(this);

Sameer Reza Khan Over a year ago

You have defined colemn definition outside component class, and handleClick is inside Test class. Put columnDefs inside state and pass that to agGridReact when rendering

Santhosh A Over a year ago

1. I'm defining the columnDefs outside the class. 2. I'm not defining state inside constructor. 3. And I'm defining this.handleClick = this.handleClick.bind(this); after super(props)

Sameer Reza Khan Over a year ago

You can do this in constructor this.columnDefs=columnDefs and then while rendering agGridReact columnDefs={this.columnDefs}

|

Collectives™ on Stack Overflow

How to add a onclick event in ag-grid cell renderer reactjs and access the class function

1 Answer 1

15 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

15 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related