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

Rob Blagden

Question

I have a results list and would like a user to be able to hover over a row and have it change colour + when a user clicks the row I would like the system to navigate to a show detail page for that record.

I can't seem to link the onclick event of the row to any meaningful action.

I've tried creating a button with a navigation action on the row but still can't access this from the onclick value / expression editor.

Is it possible in Outsystems?

Many Thanks
Rob

17 Oct 2012

João Rosado

Staff

Hi Rob,

I'm not sure why there OnClick handler for the row's but it is possible.

I got that pattern in a couple of personal eSpaces. What I usually do is to put 1 container around each of the cell contents and put the Click event on the containers.

Regards,
João Rosado

17 Oct 2012

Evert van der Zalm

MVP

Hello Rob,

This is possible.

You must add a button (or link) on the row (with extended properties set to: style, "display: none;") and that button navigates trough the detail page with as input var the TableRecord.list......Id (or other value you need to send to you're detail screen). Give the button a name.

Now on you table row, go to extended properties and set: OnClick with value: javascript:document.getElementById('" + <namebutton.ID> + "').click();"

When you now click on the row, the javascript will click the button on it, directing you trough the detail screen with the correct input var.

Kind regards,
Evert

Edit: for some usability: you could even add another extended property: style with value: "cursor: pointer;" so a click icon is show to the user when hoovering over you're row.

17 Oct 2012

João Rosado

Staff

Hi Evert,

What was wrong with my Container solution? no javascript/hidden stuff required

17 Oct 2012

1 reply

19 Oct 2012

Show thread

Hide thread

Evert van der Zalm

MVP

João Rosado wrote:

Hi Evert,

What was wrong with my Container solution? no javascript/hidden stuff required

Hello João,

I don't know for shure, but isn't it so that when you put a container around a element in the cell you need to click on the element instead of the row (so if you have a cell with width 200px but the text that is inside the container is only 100px long, the onclick wouldn't work on the last 100px) or is the container filling the whole cell?

Even so, if you have 10 cells in your table you also need to fill in 10 container, all maintaining their OnClick event, so if something need to change (another action or something), you need to change it 10 times.

Antonio Xeira wrote:

And how do you control the ID to call the Javascript?

I have a container called CalculatorButtonC with an onclick call to a javascript HideCalculator() that goes like:

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

When I open the page in the browser the container has now the ID="wt152_wtMainContent_wt37_wtCalculatorButtonC"
How do I control the ID to call the Javascript?

Hello Antonio,

When you give the container a name, it ends up in the widget list (expression editor) and there you can select the id by the <name>.<id>. Then it will use the id that is created on runtime.

Kind regards,
Evert

19 Oct 2012

Antonio Xeira

And how do you control the ID to call the Javascript?

I have a container called CalculatorButtonC with an onclick call to a javascript HideCalculator() that goes like:

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

When I open the page in the browser the container has now the ID="wt152_wtMainContent_wt37_wtCalculatorButtonC"
How do I control the ID to call the Javascript?

19 Oct 2012

Antonio Xeira

Thanks Evert
It was easy after your explanation.
It's the basics, I know, but I'm learning. :-)

19 Oct 2012

Evert van der Zalm

MVP

Hello Antonio,

We all had to learn it. It's something that took a while before I founded out :-). It's nice to write it here so others can find it 'quicker', not need to search for a long time.

Just a small suggestion for you: put a note on the row with the text that there is an OnClick style on row level. I've somethings have been searching a while before I founded out that a style or something else was applied on row level instead of cell level (even if I have set it myself :-) ). Since the row isn't selected directly but can contain 'code' it nice to leave a note so you don't forget about is or a colleague also know that something is set on row level :).

Kind regards,
Evert

22 Oct 2012

Robbie Nati

Great solution Evert.

I had a funny glitch with your solution. When i assigned the onclick extended method to the row, and the user selects that row, it would accept the value of the link.id value in the record row above. Very weird. I had to go to a cell level and assign the onclick to each cell, and that worked. Alot of extra work though.

Works perfect on a desktop, however it does nto seem to work on a mobile device/tablet (tried on iPhone5 and iPad). Could it be something to do with the method "onclick" which is not recognised by the mobile device/brower?

22 Oct 2012

Evert van der Zalm

MVP

Hello Robbie,

If you're using the OnClick event to execute an action which click's a hidden button/link where the value is set in the link itself it indeed can be the wrong one. What you can do (as a kind of work around) is in the action that is used by the OnClick event set the needed value to a local variable and set that local variable as the button/link value.

Don't tried it on phone, so can't confirm that it need to work there, I think it should since the OnClick event on a row should be the same as on a container and I know that it does work when it's set on the container. Maybe because its on row level instead of cell level which is to 'deep' for a phone? (really no idea so just trying to think logic here. Maybe João's solution works here since that one is based on containers.

Kind regards,
Evert

23 Oct 2012

1 reply

24 Oct 2012

Show thread

Hide thread

Carlos Monteiro

Evert van der zalm wrote:

About the iphone and ipad, we've experienced (and read in some forums) that they only detect the onclick events on a link and other thing like that. Table rows, table cells, divs with onclick are completed ignored!

24 Oct 2012

MVP

perhaps this document will enlighten you:

https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

24 Oct 2012

Robbie Nati

I have got this working using Joao's method.

Create a Container inside a table/row/cell. Add the necessary columns inside the Container if required.
Add an Onclick Destination to the Container. Works on Desktop, mobile and tablet devices. Thanks for everyone's input.

Robbie

25 Oct 2012

Carlos Monteiro

Ok. Another thing that keeps me away of this solution.

For example, in your table row, you want to put an action (link) "edit". Is there any way to, when you click "edit", only click edit and don't select the row?

In general, the behavior would be something like you have a link inside the container selection and, when you click the link, you don't want to click on the container selection? How can you accomplish it?

25 Oct 2012

Gonçalo Martins

Staff

Hi Carlos,
Can you explain better your requirement?
You want one table where you'll have a onclick event assigned to the rows and in each of that row you'll have a div linked to a certain action (i.e. with another onclick event assigned to that container)..
On this scenario you want to click in the div without trigger the onclick event of the row...Tell me if is this?

Kind Regards,
Gonçalo Martins

28 Oct 2012

Carlos Monteiro

Yes, it is!

28 Oct 2012

Gonçalo Martins

Staff

Hi Carlos,

Sorry about my late reply but I'm with lots of work..
To implement what you want, you can start with a simple jQuery script.
Image you have the following table:

<table id="mytable" border="1">
    <tr>
      <td>1</td>
      <td>2</td>
      <td>
        <div id="mydiv" onclick="alert('This is click DIV!!');">3</div>
      </td>
    </tr>
    <tr>
      <td>4</td>
      <td>5</td>
      <td>
        <div id="mydiv" onclick="alert('This is click DIV!!');">6</div>
      </td>
    </tr>
    <tr>
      <td>7</td>
      <td>8</td>
      <td>
          <div id="mydiv" onclick="alert('This is click DIV!!');">9</div>
      </td>
    </tr>
<tbody>
</table>

Here you can attach an event to all the rows and hen simulate a kind of override for the event attached to your div, using:

$(document).ready(function() {

    $('#mytable tr').click(function(event) {

      if (event.target.nodeName === 'DIV') {
        return false;
      }
      else
      {
        alert('This is click row!!');
      }

    });

});

Hope this can gave you some tips to solve your problem.

Best Regards,
Gonçalo Martins

29 Oct 2012

Kilian Hekhuis

MVP

Sorry to necromance an old thread, but I have a problem implementing Evert's solution, the problem being that ButtonName.Id seemingly results in an empty string when loading the page. I set the OnClick to "javascript:document.getElementById('" + BTN_ShowMail.Id + "').click();" but for some reason the page source shows <tr onclick="javascript:document.getElementById('').click();">. Any ideas?

08 Dec 2014

Guilherme Pereira

Staff

Hi kilian,

Is it possible that you set the button visible property to something that is false when the page loads?

If that's the case that might explain the empty id because when visible=false the button is not included in the server side rendering. For that you must use an extended property style with the value "display: none".

Cheers

08 Dec 2014

Kilian Hekhuis

MVP

Hi Guilherme,

That was my first concern, so I had already changed the code to actually display the button. Unfortunately, that did not resolve the problem. The only thing I could think of was that the Row was rendered before the cells, and that therfore the button Id was not yet available. But that wouldn't explain why Evert's example should work.

08 Dec 2014

Cory Creamer

The essentials forge component also has a webblock called clickablerows that will to this for you. It was what I ended up using (see discussion below if interested):

https://www.outsystems.com/forums/discussion/13311/clickablerows/

Cory

09 Dec 2014

Kilian Hekhuis

MVP

Thanks Cory! I'll certainly take a look at that!

09 Dec 2014

Elize van der Riet

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:

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.
Add the class "RowClickButton" to the button's Style Classes.
Set the display to be hidden by adding extended property of style="display: none;"
Now add the jQuery bit as described above to the "Row" Widget onclick.

21 Mar 2018

1 reply

01 Sep 2022

Show thread

Hide thread

Tamilselvan M

HI @Elize van der Riet , if we call function Using Class Name so Every time the onlick function trigger only the firstRow of the Column.

In this Scenario in Onclick Properties we to define Like this

"$('.RowClickButton"+Customer.List.CurrentRowNumber+"').click();"

Regards

01 Sep 2022

Alberto Ferreira

Hello Elize van der Riet

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

Regards

10 Aug 2018

Elize van der Riet

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.

TestRowClick.oml

13 Aug 2018

1 reply

14 Aug 2018

Show thread

Hide thread

Harmjan Molkenboer

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:

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.
Add the class "RowClickButton" to the button's Style Classes.
Set the display to be hidden by adding extended property of style="display: none;"
On the row add a extended property: Onclick = "$(this).find('.RowClickButton').click()"

I hope this helps.

14 Aug 2018

Amit Verma

Rob Blagden wrote:

Hi Rob,

Please find the attached demo oml for this.

Hope this helps.

Best Regards,

Amit Verma

TableOnRowClick.oml

14 Aug 2018

Alberto Ferreira

Thanks Elize van der Riet

I will Try and give feedback

TIA

14 Aug 2018

Elize van der Riet

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.

TestRowClick.oml

14 Aug 2018

2 replies

Last reply 16 Aug 2018

Show thread

Hide thread

Bholanath Odiya

Elize van der Riet wrote:

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.

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

16 Aug 2018

Harmjan Molkenboer

Bholanath Odiya wrote:

Elize van der Riet wrote:

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.

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

Could you please help me whats wrong ?

thanks,

Bhola

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

16 Aug 2018

Sivaramakrishna Repalle

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

14 Aug 2018

Elize van der Riet

Thanks Siva,

That will also be a solution that will work perfect.

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

14 Aug 2018

Alberto Ferreira

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

16 Aug 2018

Viegas

Hi guys,

Another way to implement that is to put the "hidden" class in the Style Class property of the button to hide it.

And on the onclick event of the Row you can put <name of button>.Id + ".click();" that will works, instead of using jQuery functions. (Your button must be named)

Remembering the button must be inside a cell, any cell, otherwise it will not be able to get any current values of the row.

10 Feb 2021

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.

See the full guidelines