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

Rank: #66026

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

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

on 2012-10-17

João Rosado

Staff

Rank: #29

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

on 2012-10-17

Evert van der Zalm

mvp_badge

MVP

Rank: #163

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.

on 2012-10-17

João Rosado

Staff

Rank: #29

Hi Evert,

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

on 2012-10-17

1 reply

on 2012-10-19

Show thread

Hide thread

Evert van der Zalm

mvp_badge

MVP

Rank: #163

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

on 2012-10-19

Antonio Xeira

Rank: #15266

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?

on 2012-10-19

Antonio Xeira

Rank: #15266

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

on 2012-10-19

Evert van der Zalm

mvp_badge

MVP

Rank: #163

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

on 2012-10-22

Robbie Nati

Rank: #142

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?

on 2012-10-22

Evert van der Zalm

mvp_badge

MVP

Rank: #163

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

on 2012-10-23

1 reply

on 2012-10-24

Show thread

Hide thread

Carlos Monteiro

Rank: #8391

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!

on 2012-10-24

mvp_badge

MVP

Rank: #14

perhaps this document will enlighten you:

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

on 2012-10-24

Robbie Nati

Rank: #142

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

on 2012-10-25

Carlos Monteiro

Rank: #8391

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?

on 2012-10-25

Gonçalo Martins

Staff

Rank: #68

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

on 2012-10-28

Carlos Monteiro

Rank: #8391

Yes, it is!

on 2012-10-28

Gonçalo Martins

Staff

Rank: #68

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

on 2012-10-29

Kilian Hekhuis

mvp_badge

MVP

Rank: #2

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?

on 2014-12-08

Guilherme Pereira

Staff

Rank: #4

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

on 2014-12-08

Kilian Hekhuis

mvp_badge

MVP

Rank: #2

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.

on 2014-12-08

Cory Creamer

Rank: #5022

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

on 2014-12-09

Kilian Hekhuis

mvp_badge

MVP

Rank: #2

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

on 2014-12-09

Elize van der Riet

Rank: #605

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.

on 2018-03-21

Alberto Ferreira

Rank: #136

Hello Elize van der Riet

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

Regards

on 2018-08-10

Elize van der Riet

Rank: #605

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

on 2018-08-13

1 reply

on 2018-08-14

Show thread

Hide thread

Harmjan Molkenboer

Rank: #25074

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.

on 2018-08-14

Amit Verma

Champion

Rank: #131

Rob Blagden wrote:

Hi Rob,

Please find the attached demo oml for this.

Hope this helps.

Best Regards,

Amit Verma

TableOnRowClick.oml

on 2018-08-14

Alberto Ferreira

Rank: #136

Thanks Elize van der Riet

I will Try and give feedback

TIA

on 2018-08-14

Elize van der Riet

Rank: #605

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

on 2018-08-14

2 replies

Last reply on 2018-08-16

Show thread

Hide thread

Bholanath Odiya

Rank: #10433

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

on 2018-08-16

Harmjan Molkenboer

Rank: #25074

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

on 2018-08-16

Sivaramakrishna Repalle

Rank: #697

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

on 2018-08-14

Elize van der Riet

Rank: #605

Thanks Siva,

That will also be a solution that will work perfect.

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

on 2018-08-14

Alberto Ferreira

Rank: #136

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

on 2018-08-16

Viegas

Rank: #23968

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.

on 10th Feb

Training

Documentation

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