Send widget to location (x,y) of repeater row on click

repeater-widget
#1

Greetings all,

I’m trying to solve a repeater puzzle, anyone keen to help?

I have built a table component using a repeater widget.

At the end of each rown in the repeater I have a ‘view more options’ hamburger icon like this:

On click of the icon I want a droplist to appear like this:

When I have multiple rows in the repeater I want the droplist widget to appear at the touch point where it was clicked, so if I click the hamburger on row 4 it should appear at row 4 and if row 2 it appears at row to like this:

Here is what I’ve tried so far that didn’t work:

I put the droplist in a dynamic panel and inserted the DM into the repeater, onclick of the icon I bring the DM to the front and set panel state from null to state1 with the droplist and this happens, the DM widget pushes the rows below it downwards instead of sitting on top of it like this:

So I took the DM out of the repeater and tried to ‘move’ the repeater to the place where the icon is positioned (x,y) by setting a local variable for x and y respectively with the hamburger icon in the repeater as the target. This didn’t work either (icon appears at top left of the page) I suspect because the hamburger icon is repeated multiple times and it doesn’t know which one to move to.

I’m trying to find a way to ‘mark’ the row on click and send the widget to the coordinates of the marked row but haven’t worked it out yet.

Any ideas on how to achieve what I’ve described above?

Thanks!

#2

If you put the Menu back into the repeater, then select the repeater object, in the Repeater Properties tab on the right scroll to the bottom. You should see a checkbox that reads something like Fit to Content in HTML. Uncheck it.

Untitled.rp (61.3 KB)

Screen Shot 2018-07-29 at 7.50.29 AM.png1308×1208 28.2 KB

Or… if you still need to move the menu outside of the repeater you have to first understand that the inside of a repeater starts at (0,0). It has its own internal coordinates. So what you’ll need to do is reference the repeater’s (x,y) coordinates, then ADD an X-offset (I did 14 pixels), and for Y, multiple the height of the row by the index of the row. So if a row is 34px tall, clicking on row 8 would get you (8 * 34) = 272px.

I just woke up and am uncaffeinated. I hope this helps and makes sense!

#3

Still uncaffeinated…

If you place the menu in the repeater, Axure generates that menu for every single repeater row you have thus bloating the size of what gets rendered in browser.

But… if you put it outside of the repeater, the generated HTML is smaller, but you have to get creative when interacting with the contents of the repeater itself.

So…if you’re worried about render times (like if it’s already a really hefty prototype) then take it out of the repeater. If you’re more concerned with spending too much time making the prototype, probably keep it inside

#4

Yes! Thank you! Very nicely done albeit uncaffeinated :wink:

I went with the more efficient choice which is to leave the DM outside of the widget and move to the correct coordinates, it took a little while to tweek but everything is lining up nicely now. The one piece of information that I didn’t know was that repeaters adhere to coordinate internally.

Thank you so much for this really appreciate the support.

#5

Wooo! Glad I could help!

#6

basementdweller, I am doing that for quite a while. The issue is that for each page - even with the same repeater - I need to tackle the move with different values. using the menu width or height did not help.

Somehow I find myself doing those small move nudges over and over. Did you found a magical generic formula which is not [[This.x-140]] or calculation that relate to the number of row?

Thanks
Iris-

#7

There are function available to count the number of items in a repeater, to count the number of items a repeater is currently showing (items per page stuff), and an item.index. Personally, I would get the y-value of the repeater itself and add those values to the product of item.index and row height. An efficient way to nudge the menu live in the browser would be to setup a textbox on the side and ADD that value onTextChange. Then on the thing your moving place a label that updates its text to its x,y position OnMove.

#8

Hi basementdweller,
I have file, where achieved similar task UPDATED.rp (166.1 KB)
I have a question: How I move action menu to icon?

Thank you in advance,
Natalie

#9

How about something like this?

UPDATED.rp (156.8 KB)

Aligning the menu to the dots was blocking the dots underneath, so I made it a side pointy thing instead of a top pointy thing. Also, on the repeater’s OnLoad I’m setting the dots’ dynamic panel state to State 1 (not selected). Then onClicking the dots it fires that OnLoad command thereby resetting ALL iterations of the dots back to NOT SELECTED… then it sets the clicked dots state to SELECTED.

I also set the (x,y) of the menu to the (repeater.x + dots.x + 7(random offset)) - menu.width

And your position.y math was perfect… except for the repeater index. Looks like repeaters index at 1 and not 0. I learn something new everyday!

Hope this helps

#10

Hi jlhelmers,
Truly appreciate your amazing help!

What you did is perfect for:

But in case with multiple action menu position.y need to be under the icon like this:

If you could please help with adjustment of position.y, I would greatly appreciate it!

UPDATED_01.rp (290.5 KB)

Thank you again!
Natalie

#11

Probably just something like:
[[LVAR1.y + ((Item.index - 1) * 40) + 15]]

Table with submenus for each row vs repeater
#12

Wow, thank you so much!
[[LVAR1.y + ((Item.index - 1) * 40) + 35]]
This is perfect! :slight_smile:

#13

Thanks from my side as well.
Since I am using repeaters so often - and many woth this menu, or action on the side, I tried to generlised with in a master, but ALAS, the randomness of the Y seems to kill it. I use the exact [[LVAR1.y + ((Item.index - 1) * 40) + SOMETHING]], but that SOMETHING changes for some reasone from page to page…
:frowning:

Thanks again!

#14

Updated file: Popup menu.rp (196.1 KB)
Preview
Big thanks to jlhelmers!

#15

Does it work if you remove it from the Master? I’ve had nothing but headaches and heartaches with Masters so I tend to avoid them at all cost.

#16

Sure it does, but then I need to tweak it for every page. That’s the pain.

closed #17

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.