Highlighting selected row in Repeater solution

repeater-widget
#1

Hi,

I have tried a way of highlighting a row in a repeater, which has a OnClick/OnMouseHover event. Hope this is usefull?

Idea:

Remove the background color within the repeater shapes, just a border is good enough. Add a rectangle to depict the highlighted row in the background of the repeater, make sure the height of the highlight shape is same as that of the row.

Onclick/OnMouseHover event move this Highlight.shape to x: highlight.x (basically whatever name.x)
similarly move the shape to y: [[item.index*h-h]] (where h is the highlight shape’s height).

this is it…your row highlight is ready. This code works in case the entire repeater and highlight are placed in Panel (attached is the sample depicting the same scenario).

If its in the root page, you need to offset the highlight y location i.e [[item.index.h+offset]] where offset will be the highlight shape y co-ordinates - height of the highlight.
RepeaterHighlight.rp (60.4 KB)

RepeaterHighlightInPage.rp (60.7 KB)

#2

You can also add a rectangle background and set a selected state style. They on click you set it as selected. To only have one row at a time highlighted, set the rectangle’s selection group and uncheck isolate selection groups on the repeater control.

#3

Did you say this is supposed to work on hover as well? It looks like you have that interaction in there but it wasn’t working for me.

I’m trying to get row highlighting to work on hover. It won’t work if I use OnMouseEnter for a background rectangle because anytime I move over another widget in the row it disables. I tried using a hot spot over the whole row which sets the background rectangle to a selected state on hover but then you can’t interact with any of the widgets in the row :\

#4

The code generated for the browser is very slow. But wait a 4 or 5 seconds and you’ll see the hover row hi-lighting work.

Too bad tho, because, performance aside, this solution is the most elegant I’ve seen. Much better than where you have to add shapes and do other jiggery buggery to make a table row roll over and slection work.

The better solution is for Axure to extend data tables widget properties to include row select and mouse over. Cross your fingers.

#5

Yes, we really need row select and mouseover for tabes!!!

#6

Wrap the row in a dynamic panel. Check the Panels “trigger Mouse Interactions” Checkbox.
Make sure, that the “isolate Selection Groups” Checkbox of the Repeater is checked off.
Add the dynamic panel(s) to a selection group.
OnClick the dynamic Panel setSelected(this).

Now add the requested styles to the items inside the dynamic panel inside the repeater item. If you want to have fancy stuff like appearance changes you can add widgets with normal -> opacity = 0, selected -> opacity = 100… or hover… or clicked… whatever you want.

the “trigger mouse interactions styles” of the dynamic panel is your friend!

A hover on repeater item (with a dynamic height)
#7

This should be moved to the Repeater forum and stickied.

#8

Done! Good looking out, gothate.

#9

Hi there, is also possible to create a workaround where just one row can be selected/marked. If another row should be marked, the already selected one has to be unselected first.

Many thanks!

#10

if you add the panel to a selection group its already done.

#11

Thanks. It works…

#12

I thought I can add my issue here as it is related. I used dynamic panel method and added tablecells in repeater row. But I want to mark and highlight multiple as I click on them and deselect when I click again on any row.

I have additional dynamic menu with longclick (as an alternative to right click) and I think because of longclick, it sees it as another click and deselects even though the row is still marked. Because my menu option should work on only marked rows and it does but highlight disappears. (My condition under click of repeater row is, if item ismarked then set selected table cells. )

Can this be because when one cell is updated the row is updated again and the marked value stays intact but somehow the selected option doesn’t stay true. You will probably need an example…:frowning: But I feel like I need something like onUpdate event…

#13

bind the selcted to the marked (on item load), toggle marked (on click) and force the repeater to redraw (apply any filter [[1 == 1]] or sort [column 1 asc]).
Untitled.rp (62 KB)

#14

Thanks Gregor. Yes I think I did similar in the meantime. But I didn’t have a sort may be that’s why onLoad did not load the items with data in my situation because it went to ‘if Marked true case’ and made them selected but my real data is gone. So I put the item set text in that case too.
Still I realised it is better if I unmark the rows so deselection will work after making the menu do it’s job.

I don’t know why but I had a tooltip in two of the table cells inside repeater and dynamic panel, that would show when i hover on images inside the cells. That tooltip was showing fine but now as if each repeater item is always in front, those tooltips stay behind, so they are cut off by the other item in repeater. (they are all like rows but the way like your example) I even force them to the front. Is it me updating data in cells changed that? I can put this issue somewhere else but it is repeater issue again…

#15

i think you are not fully aware about the repeter on load event.

place a rectangle next to your repeater, name it and add the current item.index [[target.text + “>” + item.index]] to the widget with the onItemLoad event.

this will make you aware about the repeater reloads and you might better understand when things happen.

i don’t know what your tooltip is. there is a tooltip concept in axure. if you use this the tooltip is always in front. if you construct your own tooltip inside a repeater.item there might be different reasons why it is in the back.
first might be that the construct of the dynamic panels don’t allow the tooltip to be in front (wrapped in a dp in the back of your “row”-dp).

#16

Cool thanks for the debug tip.
Yes I am using my custom tooltip. Before I was controlling them outside the dp, then I put them inside and was working ok by bringing them front and show. But after some code changes this behaviour changed. I may bring them out again or try to figure out what happened. Thanks.

#17

Gregor you sir are a genius! Took me a bit to get my head around what you were saying but it really does work. Thanks so much.

#18

Sir Gregor,

Can you please post an Axure file that represents this? Thanks a million - because you are worth that and more!

"Wrap the row in a dynamic panel. Check the Panels “trigger Mouse Interactions” Checkbox.
Make sure, that the “isolate Selection Groups” Checkbox of the Repeater is checked off.
Add the dynamic panel(s) to a selection group.
OnClick the dynamic Panel setSelected(this).

Now add the requested styles to the items inside the dynamic panel inside the repeater item. If you want to have fancy stuff like appearance changes you can add widgets with normal -> opacity = 0, selected -> opacity = 100… or hover… or clicked… whatever you want.

the “trigger mouse interactions styles” of the dynamic panel is your friend!""

#19

I don’t make it complicated.when one of rectangle is clicked,select is.Then trigger Event that select all rectangle within repeater.You must set the style first.


#20

Thanks Karl - a nice quick and easy way to highlight a row. :slight_smile:

Cheers!