Is it possible to use an onclick event on a row in a list to perform an action?

function HideCalculator()
{
document.getElementById("Calculator").style.display="none";
document.getElementById("CalculatorButton").style.display="block";
document.getElementById("Calculator").style.display="none";
}

Had the same issue, wanting to call an action on click of a row. Tried the above and same as Kilian the Button ID was not yet generated when the javascript for the <tr> row tag was generated and got empty button ID "javascript:document.getElementById('').click();". 

In case this may help someone else new to OutSystems and jQuery, I used jQuery to solve the issue using a style class. Added style class to my button of RowClickButton and added jQuery to the extended property "onclick" of the Row as follows:

"$("".RowClickButton"").click();"

So to summarize to call an action when a row is clicked without having to add acontainer with a handler in each cell do this:

1. Add a button in one of the cells. Set this button then to call the action you want or to navigate to where you want to when the row is clicked.
2. Add the class "RowClickButton" to the button's Style Classes.
3. Set the display to be hidden by adding extended property of style="display: none;"
4. Now add the jQuery bit as described above to the "Row" Widget onclick.

Hello Elize van der Riet

I like your solution .... but something is missing ... because I try to implement it and is not working

Regards

Hi Alberto,

I am sorry you could not get it working. I checked my steps on a sample and it worked, so perhaps you jut have a type-o in the jquery. I attach the sample. When the row is clicked it goes to another screen (you can also simply call an action in the same screen). I attach the example. Hope this helps.

Rob Blagden wrote:

Hi Rob,

Please find the attached demo oml for this.

Hope this helps.

Best Regards,

Amit Verma

Thanks  Elize van der Riet

I will Try and give feedback

TIA

Hi Elize van der Riet,

I followed your steps but it always clicked on the button from the first row.

I changed the jquery to click on the button contained in the row:

1. Add a button in one of the cells. Set this button then to call the action you want or to navigate to where you want to when the row is clicked.
2. Add the class "RowClickButton" to the button's Style Classes.
3. Set the display to be hidden by adding extended property of style="display: none;"
4. On the row add a extended property: Onclick = "$(this).find('.RowClickButton').click()"

I hope this helps.

Hi Harmjan,

You are correct, I never checked that it is passing the correct row's id. I actually never used this solution in the end, I did something else, so it was never tested properly. 

@ Alberto, I attach new example, it passes the row's value to the receiving screen to check that the value of the row clicked is passed on.

All I changed was add the"find" to the JQuery part.

My apologies for the misunderstanding and failing to test properly.

Elize van der Riet solution will work perfect.. 

1) For hidden button in the row, I have added row extended property and assign current row number

2) On the row I have add onclick event to click the hidden button 

Thanks Siva,

That will also be a solution that will work perfect.

I started an idea.... but it keeps getting better ... :)

Elize van der Riet wrote:

Hi Elize van der Riet, I tried to do this in my project but I see only blank passes to my screen action even if I am clicking on a valid row with data and passing ProposalId of the current row.   Below is what I have done.

 And I found the jquery 'find()' method goes in loop. is that the expected behavior?

Could you please help me whats wrong ?

thanks,

Bhola

Bholanath Odiya wrote:

Hi Bhola,

I don't see an error in your screenshots. The only thing I can think of is the position of your Button. It must be inside the row.

The find method tries to find all elements with class: "RowClickButton" within the Row. So if the Button is positioned somewhere else, it might get stuck (I haven't tried this).

Good luck

Thanks Elize van der Riet

Your last oml works very well. I can not select as a solution because it was not me who start the post.

Regards