Update State of React Component from ag-grid Custom Renderer

Question

I need to update the state of React Component from Custom Rendered Component of Ag-grid. I hae tried to setState() in custom component but it says setState() is not a function

// function to act as a class

//https://www.ag-grid.com/javascript-grid-cell-rendering-components/

function editCellRenderer () {}

// gets called once before the renderer is used

editCellRenderer.prototype.init = function(params) {

    // create the cell

    this.eGui = document.createElement('div');

    let row = params.data;

    let className = 'edit-btn-style';

    this.eGui.innerHTML =  '<span class="my-css-class"><div class="edit-button '+className+'" title="'+row.id+'">\
    <a target="_blank" href="URL='+row.id+'" >\
    <i class="fa fa-edit fa-1x not-selectable-element"></i></a></div>

</span>';
};

// gets called once when grid ready to insert the element
editCellRenderer.prototype.getGui = function() {
    return this.eGui;
};

// gets called whenever the user gets the cell to refresh
editCellRenderer.prototype.refresh = function(params) {
    // set value into cell again
    // return true to tell the grid we refreshed successfully
    return true;
};

// gets called when the cell is removed from the grid
editCellRenderer.prototype.destroy = function() {
    // do cleanup, remove event listener from button
};


//This is the way i am initializing AgGridReact in Reactjs component.
<AgGridReact
columnDefs={this.state.columnDefs}
defaultColDef={this.state.defaultColDef}
rowData={jobs_reindexed}
components={this.state.components}
frameworkComponents={this.state.frameworkComponents}
onGridReady={this.onGridReady}
/>

Are you sure you've shared the right piece of code? There's no react component here — apokryfos, Jun 25 '19 at 07:42
sorry, i missed it. I have added that i am declaring in render() method of reactjs Component. — Arshad Munir, Jun 25 '19 at 07:46

score 2 · Answer 1 · answered Jun 25 '19 at 14:49

It is possible to pass context property in grid options. Then you can call parent method from cell renderer.

https://www.ag-grid.com/javascript-grid-context/

It will look like this:

class ParentComponent extends Component {
    constructor(props) {
        super(props)
        this.state = {
            columnDefs: [
                {
                    headerName: '-',
                    field: '',
                    cellRendererFramework: CustomBtn
                }
            ],
        }

        this.handleStateChange = this.handleStateChange.bind(this)
    }

    handleStateChange(data) {
        /**
         * setState...
         */
    }

    /**
     * onGridReady..., onCellClicked etc.
     */

    render() {
        return (
            <div>
                <AgGridReact
                    columnDefs={this.state.columnDefs}
                    rowData={this.props.rowData}
                    onGridReady={this.onGridReady}
                    onCellClicked={this.handleOnCellClicked}
                    gridOptions={{
                        context: { componentParent: this }
                    }}
                />
            </div>
        )
    }
}

export default ParentComponent;


const CustomBtn = (props) => {
    const handleClick = (e) => {
        e.stopPropagation();
        props.context.componentParent.handleStateChange(props.data);
    };

    return (
        <div>
            <button onClick={handleClick}>
               Change State
            </button>
        </div>
    );
};

Thanks @miuosh. Exactly this solution i have implemented right now but actually i am thinking of pure java script solution for it. may be there would have a option like callback that can update state of React component. thanks again for help. — Arshad Munir, Jun 26 '19 at 07:03
Taking your code as an example my `ParentComponent` is a functional component that uses `Hooks` for its state management. But when I am trying `props.context.componentParent.myFunction` it is returning `undefined`. Any Idea how do I access functional component `=> ParentComponent`'s functions ? — Sushmit Sagar, Feb 14 '20 at 07:33
@SushmitSagar You can directly pass the function that you defined instead of `this`. For example: `function MyComponent(props) { const myStateUpdater = () => setState(); return (

) } ` — Phani Rahul Sivalenka, Mar 03 '20 at 19:37

Update State of React Component from ag-grid Custom Renderer

1 Answers1