Moving row from one repeater to another on click of a button

Hi guys,

I have 3 repeaters within a dynamic panel which you can tab between. Within each repeater I have added a further dynamic panel which essentially allows you to select an individual row. Upon selecting single or multiple rows I have a button which depending on what repeater you have showing would move the rows from repeater 1 to repeater 2 for example.

I can get the button to delete the rows which means my selector is marking the row correctly but I can’t work out how to move it.

I have seen examples of moving rows from one repeater to another but not when repeaters are in different states within a dynamic panel.

If you post your .rp file it will help others more easily understand and try to find solutions for you.

This seems like it should work… In general, uniquely name each of your repeaters so you can be sure you referring to the correct repeater. You’ll need to copy all the data in the repeater sheet row of repeater 1 before you delete it (obviously), then add a row to repeater 2 using that data. Since you need to support multiple rows (whichever are selected) you could have a “secret” function built into each of your repeaters which adds a row to another repeater, using its own data, and then deletes itself. For instance, if you have a checkbox to show selection state, your “Move” button could move the checkbox by (0,0). This would cause every instance (the checkbox in each row) to be moved, so the OnMove event could test “If selected of This is true” and if so add a row to repeater 2, setting each column to the value in its own columns, and then “delete This row”. Make sense? If not, post your .rp file and I’ll give it a shot.

Thanks mbc66,

I will give it a go. If not I will recreate my .rp file without all the detail as I can’t share it unfortunately.

Yep i’m lost. For now I am just trying to move rows from tab 1 to tab 2 upon selecting a single or multiple rows and clicking the “move” button

moverow.rp (406.3 KB)

Hi MBC66, did you get a chance to see what i’m doing wrong?

Sorry for the lag–didn’t see your replies until today. Wow…lots going on in your prototype… and I kind of went down your rabbit hole… ended up needing to change quite a bit, learn some new things and invent others to get this to work at all. Still could use some improvements, but it’s a start.

See the v2 page in this updated .rp file:
moverow.rp (866.1 KB)

  • This makes sense, but there is an easier and more reliable way to do this. Essentially you only need one widget and just toggle its selection state with OnClick. I wouldn’t have bothered changing this, but you had same kind of dynamic panel (dp) checkboxes in all the repeaters which makes everything less efficient and harder to code. If your “checkbox” widget is a custom image (like your white checkmark on a green circle) you can create an image for selected and unselected states (even mouseOver, mouseDown and disabled) and set your image for each interaction sytle. Or if you are using Axure widgets or multiple widgets/images, you can style the topmost widget for selected and unselected and get it to look right.
  • I created a “Delete Rows” button to test this out and ended up making it an integral part of how the “Move Rows” button works. If you don’t want users to be able to use this to delete multiple rows, you can hide this button, but don’t delete it.

  • For your “Move Rows” button, there are two basic operations for each row to be moved:

    1. Add a row to the second repeater, using the same data as the row in first repeater.
    2. Delete row in first repeater.
  • In Axure code, you can copy text, but not widgets like shapes, images, file URLs or pointers to image files, so I changed the way the icons are represented in your repeaters. They are now dp’s with a shape or image in each state. The repeater columns for these (Icon_1, Icon_2, and Action) specify which state to show (and the text in these columns must exactly match the name of the dp state.) Look at the repeaters’ OnItemLoad event for details.

  • Copying the data in a repeater row is best done inside the first repeater, because it has access to all of its own data. To build this out, I created an “action icon” which looks like a phone+arrow (to move things from “To issue” to “Calls expected”) Replace with whatever icon makes sense to you. So, when a row is selected, the “IconAction” dp is changed to the “Move” state. Clicking on that action icon adds a row to the “Calls expected” repeater then deletes its own row. There are brief animations to communicate this action to the user. See the code on the “ToIssueMove” group inside the IconAction dp inside the “To issue content” repeater:

  • In that “Add Rows” statement, each column in the “MarginCalls-Callsexpected” repeater is set to the column data in the current row, like this:

  • Once the new row has been added to second repeater, the current row is deleted. The Hide statement provides a visual cue that it is going away–otherwise it can be hard to notice it pop off the stack.

  • The “Fire OnLoad …” statements are a way to trigger your count numbers (to left of tables) for each Tab. For example, you initially have 49 rows in the first tab (repeater) and 12 in second tab. When a row is moved, the counts are updated to 48 and 13. Notice also I changed the way you set “Loading” to a number (the item count in each repeater). Instead of doing this in the OnPageLoad event, it is now done in the OnLoad event for each repeater. This is a more reliable way to get these counts and allows the counts to be easily updated at any time.

  • So, all this works well for a single row at a time. I initially tried to do the same approach for multiple rows (When the blue “Move Rows” button is clicked) by just calling the “Fire OnClick” event for each row’s “Move” icon group. It worked when only a few rows were selected but failed when all rows selected (on my system, more than 5 or 6 rows). Actually, all the rows were copied to the second repeater properly, but not all rows would be deleted from the first repeater.

  • I had to create a different way to move multiple rows… I thought it would be better to first move all rows, then once that was completed, delete all the selected rows. I copied the “Add Rows…” statement to the OnMove event for the same icon group and call that from the “Move Rows” button. So, if the phone+arrow icon is clicked, just that one row will be moved, but if that icon is moved, it tests whether the row is selected, and if so, adds a row to the second repeater. Only one statement and no animation to make it faster. However, Axure doesn’t provide an easy way to determine when a chain of actions like this are completed (every phone+arrow icon is moved, if selected, it adds a duplicate row). Waiting for N ms doesn’t cut it because it tends to get slower as more rows are selected (and as content in the rows is more complex). Also, as this was taking 5–10 seconds to complete when all rows are selected, clicking on the “Move Rows” button looked like it was doing nothing. I added a busy-spinner GIF, named “busyMove” for user feedback and noticed that it would not show when the button was clicked–until the repeater actions were completed, even when it was the first statement in the OnClick event, before the “Add Rows” statement (at least on my system with Chrome browser on Windows). Thus, the code is prioritizing the repeater stuff over showing/hiding an image. My plan for good user feedback was foiled, but–AHA!–I stumbled upon a way to determine when all the “Add Row” actions had completed. To show the busy-spinner first, I do this with the OnMouseDown event, then my “Add Row” code and Hide busy-spinner with the OnMouseUp event. In the OnHide event of the “busyMove” image, it calls “Fire OnClick” for the “Delete Rows” button. The result is the busy-spinner is shown, then the repeater adds rows and when completed, the spinner is hidden and the initial rows are deleted.

It is all still fairly slow, likely because you have so many complex repeaters on one page here. If you select all 49 rows and move them, it may be a hit-or-miss situation whether it actually works or you get a stall or “unresponsive page” error in your browser. There may be a better way to move each selected row one at a time (using the isFirst, isLast and isMarked variables) which would be slower but more reliable.

I added a few things to the tabs on the left so I could keep track of which repeater was active, and probably some other things I can’t recall now. Let me know if you have questions on any of this…

2 Likes

Amazing I wasn’t expecting such an in-depth response. I’ve had a quick look and you seem to have nailed it. I will have a good look through it this afternoon.

I have dipped in and out of Axure over the last 6 years and probably picked up some bad habits so anything I can now simplify for the more complex flows will be a good learning curve.

Thanks for you your help MBC66 I really appreciate it.