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, Feb 25 '19 at 14:23
This worked for me `cellRendererFramework: (props) => { return ( } ); }` — Santhosh A, Mar 05 '19 at 14:26

Sameer Reza Khan · Answer 1 · 2019-03-01T13:23:33.193

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 01 '19 at 13:23

answered Mar 01 '19 at 10:04

Sameer Reza Khan

474
4
15

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 } ..... ]; class Test extends React.Component { constructor(props) { super(props) this.handleClick = this.handleClick.bind(this); }` – Santhosh A Mar 01 '19 at 13:23
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 Mar 01 '19 at 13:26
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 – Sameer Reza Khan Mar 01 '19 at 13:30
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)` – Santhosh A Mar 01 '19 at 13:33
You can do this in constructor `this.columnDefs=columnDefs` and then while rendering agGridReact `columnDefs={this.columnDefs}` – Sameer Reza Khan Mar 01 '19 at 13:35
Ok, I'll try now. In the meantime check this for the clearer picture. [https://stackoverflow.com/questions/54885155/uncaught-typeerror-this-opena-is-not-a-function-at-htmlbuttonelement-onclick] – Santhosh A Mar 01 '19 at 13:36
I'm still getting TypeError – Santhosh A Mar 01 '19 at 13:43
I will suggest to put columnDefs inside constructor, if you not use state, then you can access it by this.columnDefs and it will have access to all functions from your class. – Sameer Reza Khan Mar 01 '19 at 13:45
still facing the same error. can't understand where I'm wrong. – Santhosh A Mar 01 '19 at 13:56
So I have same thing in my project, my columnDefs are in state and I have created a separate function which returns jsx . That jsx is using functions from my class and it is working. Cell renderer has also rendered some other child inside it and it is working too. Can you share your complete code so I could help you out. – Sameer Reza Khan Mar 01 '19 at 13:58
Edit your question and put whole code of that file where you are getting error. – Sameer Reza Khan Mar 01 '19 at 14:01
Hey can you do this, let columnDefs = instead of this.columnDefs – Sameer Reza Khan Mar 01 '19 at 14:17
how can i overcome this error in functional components? there is no `this` used in it. – Sanal S Jul 23 '20 at 12:16
@sanal try without this – Sameer Reza Khan Jul 24 '20 at 13:10
refer to https://stackoverflow.com/questions/61493626/ag-grid-cell-renderer-icons-are-not-clickable-react/66546366#66546366 – Nivil Boban Mar 09 '21 at 11:54

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

1 Answers1