Add react-router-dom Link in ag-grid react
up vote
0
down vote
favorite
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)) }.
reactjs react-router-dom ag-grid-react
edited Nov 19 at 8:18
c-chavez
2,09321629
asked Oct 28 at 11:47
abdul
5019
|
show 3 more comments
up vote
0
down vote
favorite
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)) }.
reactjs react-router-dom ag-grid-react
edited Nov 19 at 8:18
c-chavez
2,09321629
asked Oct 28 at 11:47
abdul
5019
when usingLinkis it throwing any error.
– AkshayM
Oct 28 at 11:55
and when youanchortag it will reload the page which is a default and expected behavior
– AkshayM
Oct 28 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 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 at 19:21
I can't share my piece of code, but the error in stacktrace points to the code below, But with <a> 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 at 13:52
|
show 3 more comments
up vote
0
down vote
favorite
up vote
0
down vote
favorite
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)) }.
reactjs react-router-dom ag-grid-react
edited Nov 19 at 8:18
c-chavez
2,09321629
asked Oct 28 at 11:47
abdul
5019
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)) }.
reactjs react-router-dom ag-grid-react
reactjs react-router-dom ag-grid-react
edited Nov 19 at 8:18
c-chavez
2,09321629
asked Oct 28 at 11:47
abdul
5019
edited Nov 19 at 8:18
c-chavez
2,09321629
asked Oct 28 at 11:47
abdul
5019
edited Nov 19 at 8:18
c-chavez
2,09321629
edited Nov 19 at 8:18
c-chavez
2,09321629
edited Nov 19 at 8:18
c-chavez
2,09321629
2,09321629
asked Oct 28 at 11:47
abdul
5019
asked Oct 28 at 11:47
abdul
5019
asked Oct 28 at 11:47
abdul
5019
5019
when usingLinkis it throwing any error.
– AkshayM
Oct 28 at 11:55
and when youanchortag it will reload the page which is a default and expected behavior
– AkshayM
Oct 28 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 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 at 19:21
I can't share my piece of code, but the error in stacktrace points to the code below, But with <a> 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 at 13:52
|
show 3 more comments
when usingLinkis it throwing any error.
– AkshayM
Oct 28 at 11:55
and when youanchortag it will reload the page which is a default and expected behavior
– AkshayM
Oct 28 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 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 at 19:21
I can't share my piece of code, but the error in stacktrace points to the code below, But with <a> 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 at 13:52
when using
Link is it throwing any error.– AkshayM
Oct 28 at 11:55
when using
Link is it throwing any error.– AkshayM
Oct 28 at 11:55
and when you
anchor tag it will reload the page which is a default and expected behavior– AkshayM
Oct 28 at 11:55
and when you
anchor tag it will reload the page which is a default and expected behavior– AkshayM
Oct 28 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 at 15: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 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 at 19:21
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 at 19:21
I can't share my piece of code, but the error in stacktrace points to the code below, But with <a> 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 at 13:52
I can't share my piece of code, but the error in stacktrace points to the code below, But with <a> 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 at 13:52
|
show 3 more comments
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53031160%2fadd-react-router-dom-link-in-ag-grid-react%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
when using
Linkis it throwing any error.– AkshayM
Oct 28 at 11:55
and when you
anchortag it will reload the page which is a default and expected behavior– AkshayM
Oct 28 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 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 at 19:21
I can't share my piece of code, but the error in stacktrace points to the code below, But with <a> 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 at 13:52