Hi
I want a small clarification on one use case related to IgrDataGrid.
On applying conditional based hyperlink to a column user experience unexpected behavior in the grid(After scrolling this issue arises).
You can reproduce the issue by following below-mentioned link. Also you need to add the highlighted particular change in function onPhoneCellUpdating,
https://codesandbox.io/s/elastic-varahamihira-75szqw?file=/src/index.tsx:12128-13175
After changing in the above mentioned link we can see the issues below in the SS(you may have to scroll up or down to reproduce it).
We Hope you will provide the solution for the above mentioned issue or an alternate approach for the same.
Thanks
Hello Shubham,
I have taken a look at the CodeSandbox that you provided, and I have modified some of the code to look more like what is in your screenshot. For example, here is the modification of the code:
if (item.Age < 30) { link.href = "tel:" + item.Phone; link.textContent = item.Phone; link.style.color = "red"; } else { link.href = "tel:" + item.Phone; link.textContent = "Multiple"; link.style.color = "#4286f4"; }
In doing this, I cannot seem to reproduce the behavior you are seeing when scrolling the grid – the template is staying as expected as it will be re-evaluated with each new cell that is scrolled into view.
I am linking the forked CodeSandbox here: https://codesandbox.io/s/misty-star-fn6phy?file=/src/index.tsx:12977-13240.
If this still reproduces the behavior you are seeing, please let me know, as this could be an environmental issue if it does. It may be helpful if you can provide some further information about the system and browser you are testing on.
Please let me know if you have any other questions or concerns on this matter.
Hi Andrew,
To be more clear what I need is certain cells that shouldn't have hyperlinks in the "Phone" column. So to reproduce the issue you can just comment out the link.href = "tel:" + item.Phone; line for condition item. age<30 and I believe you will able to reproduce the issue. Initially, it would work fine but as you scroll down you will see it won't be working as per the condition it was based on.Hopefully, this will clear your doubts. Hoping to hear a positive response.
I can remove the link.href setting, but this will not necessarily remove the href because the elements for the templates in this case are recycled and reused as you scroll. So, if you remove the link.href only, it may inherit the href from another cell as you scroll. Rather than doing that, I would recommend using the following:
if (item.Age < 30) { link.href = "tel:" + item.Phone; link.textContent = item.Phone; link.style.color = "red"; } else { link.href = ""; link.textContent = "Multiple"; link.style.color = "#4286f4"; }
This will reset the href in the case of the item.Age < 30 condition.
Thanks for your response, Andrew.
But I don't want to show it in hyperlink format at all. I want it to be seen as normal text when item.Age<30. (no underlined text and no redirecting of the page on clicking on it). Hopefully, you understand my concerns.
Thank you for confirming that the “Multiple” should not actually be a hyperlink in this case.
Since this is the case, I would recommend adding a span element to the template and then toggle the visibility/display of the hyperlink and the span depending on the underlying item. Here is a link to a modified CodeSandbox to demonstrate: https://codesandbox.io/s/trusting-tom-lx85qn?file=/src/index.tsx.