Hi!
What you are asking for is a fairly advanced. Before continuing, make sure you are familiar with the following concepts:
Also, in the code you’ll see the number 30 throughout. This is the height of the repeater row. You’ll change this to be the height of your row.
The sample provided is in Axure 8. I’m hoping this works in Axure 9. (I haven’t upgraded yet due to $$$)
Setup
- Put the repeater in a dynamic panel
- In the dynamic panel, create a hidden label called v_selectedRow. We’ll be using the text of this as a ‘variable’ to store which row is selected by number. (I don’t like using global variables for in widgets like this dropdown, because if you want to reuse it in a different file, you have to remember to create the global variable first.)
- Behind the repeater in the same dynamic panel, place a rectangle that will represent row selection. (Make sure you can see through your repeater row.) This rectangle needs to be the height of the repeater row.
- In the dynamic panel, place a tiny 5x5 hotspot at x=5, y=5 or so and conceal it behind a rectangle. Both the hotspot and ‘hider’ rectangle will be behind the repeater and the selection rectangle. We’ll be using this to capture keystrokes, and we’re hiding it so we can’t see its focus rect. I’ll call this hotspot ‘keyController’
- Create a ‘function’ hotspot called function_selectRow. (A ‘function’ hotspot is a common way to encapsulate commands: put the commands in the OnMove interaction of the hotspot, and move the hotspot by 0,0 to execute those commands.) This will select the row that corresponds to the value in v_selectedRow by moving the selection rectangle to the appropriate y position.
- Place two ‘listener’ hotspots in the repeater row. One will select the row that has the same value as the field, and the other will update the field value with the text of whichever row is selected.
Upon showing the dropdown
We’ll use the OnShow interaction of the dynamic panel to do the following:
- Set focus on the keyController hotspot
- Move the listener in the repeater row the selects the row based on the text in the field
Handling keystrokes
- The keyController hotspot has focus, so it can handle the keystrokes in its OnKeyUp interaction. It will handle the Up, Down, and Return keystrokes
- When Down is pressed, it will increment v_selectedRow and move the function_selectRow hotspot that selects the row based on v_selectedRow’s value
- When Up is pressed, it will decrement v_selectedRow and move the function_selectRow hotspot that selects the row based on v_selectedRow’s value
- When Return is pressed, it will move the listener that updates the field with the text value of the selected row. It will also hide the dropdown DP.
I know all of this is complicated, so let me know if you run into any issues.
Here’s the Axure 8 file. It will convert to 9 when you open it (and hopefully work).
Live sample
selectRepeaterRowWithKeystrokes.rp (68.4 KB)
[Edit] If you’d rather select the repeater row itself rather than use a rectangle behind it to show selection, you can use a third listener in the repeater row to accomplish that, which would compare [[Item.index]] with v_selectedRow and select the row if they match.
