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

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

  
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
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
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.
Hi Evert,

What was wrong with my Container solution? no javascript/hidden stuff required
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?

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
Thanks Evert
It was easy after your explanation.
It's the basics, I know, but I'm learning.  :-)

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
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?
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
Evert van der zalm wrote:
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
 
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! 
 
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
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?
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
Yes, it is!
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
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?
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
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.
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):

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

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