Hello Sudipta,´´

I didn't quite understand what you mean, can you explain a little better?

Regards,

Jorge Rodrigues

Hi Sudipta,

I don't think there is a straight forward low code way to do this, as the table-row is not available to attach events on in Service Studio.

So I had a bit of a try with some Javascript, and you can add an eventlistener to each row click event in the onRender of your screen.  This will work, you can even call a client action directly as the function of the addEventListener.  The only problem with that is it will not position the currentrownumber and the Current record of your list correctly.

If that is what you need (and usually that is indeed what you need when you want to do anything meaningfull with a click event in a table), you'll have to take in one step further, and I have found this trick to make sure the current record in the called client action is correct :

I made sure that 1 element inside the row 

• has a click event through the normal low code way
• has a special class ClickableElement

And in the javascript in the OnRender, instead of attaching the wanted client action directly to the event, I attach a function to the event, that executes a click on this element.

See attached oml.

Dorine

EDIT : to make it complete, also add this CSS to change your cursor

#TableWithClickableRows .table-row {
    cursor: pointer;
}

EDIT2 : you might want to check out this forge component.  It does something similar like I have attempted, but it looks much more professional.

Hi Sudipta,

In addition to the previously suggested solutions, I want to share one more approach to implemented the mentioned use case using JS.

Implementation steps:

1) Add a custom class to the table widget (jsClass)

2) Define OnRender event handler to the respective screen

3) Within the OnRender event handler, introduce a JS node with the below-mentioned javaScript code

JavaScript Snippet:

var table = document.querySelector('.table.jsClass');

table.addEventListener('click', function(e) {
    var row = e.target.closest('tr');
    var parentNode = row.parentNode;
    var index = Array.prototype.indexOf.call(parentNode.children, row);
    
    $actions.OnRowClick(index);
});

See this sample screen: RWA | TriggerEvntOnRowClick

Refer to the attached .oml file

I hope this helps you!

Kind regards,

Benjith Sam

Thanks Guys, I will investigate these approaches.  Although I am aware of these JS approach but looking for more Outsystemy approach.  Again, thanks, really appreciate your feedback

Hi all,

I know this is an old post, but I'm going to sin against the "don't drag old cows out of the ditch"(*) rule anyway.

I didn't even remember this post and my contrived answer, but as it happens, I got inspired by an Idea on the same subject this week, and I created a small forge component that solves this problem in a clean and easy to use way.  

So for future reference of anybody searching the forum on this topic: OnRow

Dorine

(*) yes, I know this is not real English