14
Views
4
Comments
Solved
how to apply row color on click event

Hi,

I want to change the background of selected row of Table Widget when I click on it and also need to remove it when I select some another row using only CSS No JS or jQuery



Rank: #95
Solution

Hi SP1312,


There are several ways of doing it, I will provide you an example of one of these.


1. Create a local variable on your screen that will hold the position of the record in the table which is clicked, starting with -1 (no row clicked to start with):


2. For each row cell, you apply a style or class for if the position of the record is the same as the one selected.


3. For each row cell, you define an onClick event for an action where you pass the row number of the record clicked and update the variable you created in 1:


And that's it!

You can find the OML in attachment.

Hope it helps.


Regards,
João

test2.oml

Rank: #72

Hello SP1312 ,

This javascript does all the work,

"$(this).addClass('selected').siblings().removeClass('selected')"

Add it to the Row onclick event.

It adds the selected class to the current row and removes it from the others.



See the screenshot where it should be

Here's the CSS class


Attached is the sample oml.


BackgroundColor.oml

Rank: #31454

Hi Marques,

I applied paging to my Table Widget and when I navigate on any other page then the selection remain on that row for that record where I clicked. 

i tried to clear it but unable to do that.

https://personal-rbdl.outsystemscloud.com/SideBartest/Test?_ts=637418469851101471