Clickable row with another link

Clickable row with another link


Hi all.

I have a table with clickable rows (following the suggestion on this post). However, some of my rows have another link to a different server action (delete, in this case). In an older version of my code this worked fine - the delete was exectuted without issues - but right now the delete is executed and then the 'click' event is executed after that. 

Any idea what I can do in order to have the clickable row behavior and have to possibility to delete when I click in an icon displayed inside a cell? Any idea why this used to work and doesn't anymore?



Hi Maria.

To do that you should add a stopPropagation() javascript event to allow you to select that specific action within the cell that already has an event attached.



Hi Maria,

There are several suggestions in that post... which one are you using?

just of the top of my head, if you're using Javascript for the clickable rows, you'll have to make sure that if both the row and the link inside it have an event handler, it doesn't bubble up past the link, that way if the link catches it, the row won't.

You can read more about event bubbling here. In order to stop bubbling you can use the event's method stopPropagation().

Jorge, I am using the "OnClick with value: javascript:document.getElementById('" + <namebutton.ID> + "').click();"" suggestion. 

To use the event's methof stopPropagation I'll have to use javascript on both links, right?

Is there a reason why the link was being successfull and the row wasn't (in the previous version), and now that doesn't happen?

I would think so, you'd need to add javascript to the link as well...

When it was working previously, what was the method of the link? Submit or Ajax Submit? did you change that from one version to the other?

Yep, I was just realizing that as well. It used to be Submit and it was changed to Ajax Submit (probably in order to avoid that 'page blink').

So... what was happening is you weren't seeing the row being also clicked because you were refreshing the entire page before the click event bubbled up to the row.

Hi Maria,

Hope you managed to solve your issue. Please let us know if any of the suggestions worked out, or share your solution here for the community to learn with you. Questions with a post marked as Solution will help others figure out how to implement this pattern in the future (might even prompt someone to create or update a Forge component to address it).

Thank you!


could you help me out. I tried to follow the suggestions above, but if I put the link in row 1 it doesn't work on row 1, on row 2 it displayes row 1, on row 3 it displayes row 2 and so on. If I put it in the header (as in the picture) it always displayes row 1, no matter which row is clicked. 

Could you please advice?

Thanks in advance. Bouke