Add react-router-dom Link in ag-grid react

Question

How can I replace a with of react-router-dom, in ag-grid. It is making the page reload instead of pretending to be a single page application.

I have tried with this but it doesn't work

cellRenderer:  (params)=> {
  return <Link to={`/?info=${params.data.Id}`}>"+{params.value}+"</Link>,

Is there a possibility that we can use Link instead of

cellRenderer:  function(params){
  return "<a href='/?info=" + params.data.Id+ "'>"+params.value+"</a>";},

when using Link it is throwing the Error:

Error: ag-Grid: cannot get grid to draw rows when it is in the middle of drawing rows. Your code probably called a grid API method while the grid was in the render stage. To overcome this, put the API call into a timeout, eg instead of api.refreshView(), call setTimeout(function(){api.refreshView(),0}). To see what part of your code that caused the refresh check this stacktrace.

The error in stacktrace points to the code below, But with element it works fine:

===> GetAPI(){ var url = xxxxxxxxxxx; axios.get(url).then(response => { if (response.status == 200) { this.setState({ patients: response.data, loading: false }); } }) .catch(e => console.log('Error While Fetching Fee List: at Listing/index.js > Error: ', e.message,'\n for user : ',this.props.auth.user.email)) }.

and when you `anchor` tag it will reload the page which is a default and expected behavior — AkshayM, Oct 28 '18 at 11:55
when using Link it is throwing the Error: Error: ag-Grid: cannot get grid to draw rows when it is in the middle of drawing rows. Your code probably called a grid API method while the grid was in the render stage. To overcome this, put the API call into a timeout, eg instead of api.refreshView(), call setTimeout(function(){api.refreshView(),0}). To see what part of your code that caused the refresh check this stacktrace. — abdul, Oct 28 '18 at 15:55
I am not able to reproduce the error. Can you make stackblitz of some part of your code, so that I can fix it for you? — AkshayM, Oct 28 '18 at 19:21
I can't share my piece of code, but the error in stacktrace points to the code below, But with element it works fine ===> GetAPI(){ var url = `xxxxxxxxxxx`; axios.get(url).then(response => { if (response.status == 200) { this.setState({ patients: response.data, loading: false }); } }) .catch(e => console.log('Error While Fetching Fee List: at Listing/index.js > Error: ', e.message,'\n for user : ',this.props.auth.user.email)) }. — abdul, Oct 29 '18 at 13:52
What is gridAPI's refreashView()? Where do I need to call it? Do I need to call it after getting the data from the server and updating the state. It don't give any error with html . Why It need to refresh when we use — abdul, Oct 29 '18 at 13:58
try: `cellRenderer: (params)=> { return {params.value}` to see what happens. Also, which version of react router are you using? — c-chavez, Oct 30 '18 at 12:31
Tried cellRenderer: (params)=> { return {params.value}, but it is throwing the same error. @c-chavez — abdul, Nov 19 '18 at 08:23
having the same problem here. The ag-grid error is a result of an error thrown by the Link component: `Uncaught Error: Invariant failed: You should not use outside a `. I haven't figured out how to get the link working though, as the ag-grid is inside a — Mason Bourgeois, May 29 '19 at 21:45

score 8 · Answer 1 · answered Sep 23 '19 at 18:29

I stumbled upon this solution out of dumb luck but if you add reactNext={true} as a prop to AgGridReact, your first solution will work with cellRendererFramework.

      <AgGridReact
        reactNext={true}
        columnDefs={columnDefs}
        defaultColDef={defaultColDef}
        rowData={tableData}
      >
      </AgGridReact>

Then in your columnDefs object add this attribute,

cellRendererFramework: (params) => {
  return <Link to={`/?info=${params.data.Id}`}>"+{params.value}+"</Link>,

Apparently in the Ag grid documentation, they said features included in reactNext will eventually be merged into the stable source code, but it hasn't yet.

score 0 · Answer 2 · edited Aug 14 '19 at 13:24

0

Even I faced similar issue. The way I solved it was by handling Cell Clicked Event. Inside Cell Clicked Event I checked which column it is coming from and did props.history.push.

onCellClicked: (events) => {
    if(events && events.column && events.column.colDef.field === "accountId") {
        props.history.push(`/${events.value}`);
    }
}

edited Aug 14 '19 at 13:24

RobC

22,977
20
73
80

answered Aug 14 '19 at 12:57

Ram

11

Add react-router-dom Link in ag-grid react

2 Answers2