Log in to AnswerLog in to Follow
Rob Blagden
19027Views
34Comments
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
1
0
on 2012-10-17
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
1
0
on 2012-10-17
Evert van der Zalm
mvp_badge
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.
3
0
on 2012-10-17
Hi Evert,

What was wrong with my Container solution? no javascript/hidden stuff required
0
0
on 2012-10-17
Evert van der Zalm
mvp_badge
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
1
0
on 2012-10-19
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?

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

0
0
on 2012-10-19
Evert van der Zalm
mvp_badge
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
0
0
on 2012-10-22
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?
0
0
on 2012-10-22
Evert van der Zalm
mvp_badge
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
0
0
on 2012-10-23
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! 
 
0
0
on 2012-10-24
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
0
0
on 2012-10-25
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?
0
0
on 2012-10-25
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
0
0
on 2012-10-28
Yes, it is!
0
0
on 2012-10-28
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
0
0
on 2012-10-29
Kilian Hekhuis
mvp_badge
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?
0
0
on 2014-12-08
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
0
0
on 2014-12-08
Kilian Hekhuis
mvp_badge
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.
0
0
on 2014-12-08
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
0
0
on 2014-12-09
Kilian Hekhuis
mvp_badge
MVP
Thanks Cory! I'll certainly take a look at that!
0
0
on 2014-12-09

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.



2
0
on 2018-03-21

Hello Elize van der Riet


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


Regards

0
0
on 2018-08-10

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

0
0
on 2018-08-13

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.

2
0
on 2018-08-14
Amit Verma
Champion

Rob Blagden wrote:

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,

Please find the attached demo oml for this.

Hope this helps.

Best Regards,

Amit Verma


TableOnRowClick.oml

0
0
on 2018-08-14

Thanks  Elize van der Riet


I will Try and give feedback


TIA

0
0
on 2018-08-14

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

1
0
on 2018-08-14

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




0
0
on 2018-08-16

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.

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




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


0
0
on 2018-08-16

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 


1
0
on 2018-08-14

Thanks Siva,


That will also be a solution that will work perfect.

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


0
0
on 2018-08-14

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

0
0
on 2018-08-16

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.

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