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)
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.
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 :\
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.
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!
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.
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⌠But I feel like I need something like onUpdate eventâŚ
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)
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âŚ
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).
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.
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!""
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.
But I feel like I need something like onUpdate eventâŚ
