Table Records Select Row

Good day.

Is there a way I can make a Table Records where User can click and select a ROW w/o using a checkbox and get the selected value.

Thank you.


A way to make the row clickable is to place a Container in each cell with width set to "Fill Parent". You can then associate a On Click action to the containers to do any logic that you need. Note: this doesn't work so well when the row different amount of text in each column that it takes multiple lines (as the containers won't take full height in the columns with less content).

There are other alternatives using the extended properties of the rows and javascript to keep track of the selections, but onclicks in rows are known to have problems in some IOS devices. I would stick with my first suggestion unless you have really good javascript skills and understood what it was necessary to do with just this hint.

There are other threads in this forum regarding the subject as well.


João Rosado

Thank you for the feedback Sir João.

The first option might do the job but how can I change the style of the selected row to make it look like it is selected?

Hello Joao,

Is there any way to pass the selected row item data to onClick action?

Hi Ervin

In the first option you can pass the current record (or some identifier if the complete row is not needed) as a argument of the action that you associate with the On Click handler.

João Rosado


Can you share a sample solution that changes the style upon clicking of the row? 

Use the extended properties in the TableRecords widget and assign a class to the table. Assuming that you give the class as MyTable, you can use the folllowing script to highlight the clicked row. You can write it in the javascript of the webpage.

The css  of the class 'highlight' would be as follows:


background-color: red;


    $('.MyTable tr').click(function(){
        $('.MyTable tr').removeClass('highlight');

What the script does is attaches a click event to every row inside MyTable and on click of it removes the highlight class from every row of the table and adds the class to the row that was clicked. The highlight class has the css which shows that the row is selected.