Ability to Highlight and Select Repeater Row


#1

hi guys,
I need help! Table Help.rp (71.2 KB)

I am looking for a way to highlight/color a row when it’s hovered over in the repeater.
I also need the ability to click on a row and have a it selected in a different color.
I also need a way to highlight rows when they are checked.

My file is attached. Please help


#2

Hello, what I did to achieve this was to put a rectangle in the background of the repeater with specific styles for “selected”.
Then I added a hotspot covering all the row of the repeater, so when the user clicked the row the hotspot will call the event and will “select” the rectangle in the back and the row, making like all the row is in other color.
The same trick for the checkbox, the check can send the event to select the rectangle in the back.

Hope this helps and if someone have better solution will be great to read about it.


#3

Thanks Adolfo. Trust me! I tried that idea, but I couldn’t get it to work correctly: frowning:
I did include my file in case you’d like to try it (I am a newbie, so it takes me a while to figure things out)


#4

I set out to post a quick fix for your file …but it turned out it wasn’t so quick and easy! Take a look at this updated file for further explanation.
Table Help.rp (164.9 KB)

I show two solutions. The “Table (1)” page has a straightforward solution to highlight a row on hover, highlight in different color on click, and highlight on selection of checkbox. But, if the repeater is updated/altered in any way, such as adding/editing/deleting a row, the highlight and checkbox status is lost–because the repeater gets rebuilt. The “Table (2)” page has an improved solution to retain this status when the repeater gets updated.

Like @Adolfo said, I placed a rectangle widget (named “rowBg”) in the back of the repeater (actually just in the back of the “Display Group” to make the hover effect easier) I assigned its “interaction style” of “MouseOver Style” to a light blue color ensured the group’s “Fire Mouse Style Effects” option was checked on–thus the hover highlight happens automatically.

I created a “Selected Style” for “rowBg” with a darker blue color. Then added a Click or Tap event to “Display Group” to “Set Selected/Checked of rowBg to toggle” (or Update Row in the improved version.) I added a conditional case of “If is selected of CheckARecord equals false” so it would not conflict with the highlight due to a checked row.

Here is where I ran into a problem. The checkbox (“CheckARecord”) is inside the “Display Group” group, and clicking it fired two events: it changed its own selection state and set the selection state of “rowBg” to match. But, it also fired the group’s Click or Tap event --which essentially “double toggled” “rowBg”. My fix for this was to place a hotspot over the checkbox and use the hotspot to toggle the selection state of the checkbox. Clicking the hotspot does not fire the group’s Click or Tap.