Can you sort a repeater by a radio button selection?


#1

I have a repeater that has a radio button for each row. I am able to get only one to select by isolating the selection groups in the repeater properties, but I want to be able to sort the rows by the selected radio button. Axure RP10 only has a sort my alphanumeric, etc. is there a way to do this?


#2

save selected radio to a column, 1 or 0,sort by that column


#3

Sorry, you lost me there. Can you define “Save selected radio to a column”, please?


#5

I think the issue may be with Axure 10. In this version, if you add interactions to radio buttons, you can no longer click on them.


#6

Actually, it didn’t work in RP9 either. I wonder if there is some sort of setting within Axure that is preventing it. Any time I add a Sort to radio buttons, they are no longer selectable.


#7

The approach that @Jorkin recommends can work, but there is a bug in their posted file–more on that later. As shown in the file, what this means is to create a column in your repeater datasheet to track the selection state of the radio button, and edit this column value whenever the selection state changes for the radio button. Then, you can sort the repeater using this column, in order to get the selected radio at the top (descending sort, with “1” at top) or bottom (ascending sort).

I have not found this to be the case… What kind of interactions are you assigning to radio buttons that interfere with Click or Tap events? Could you post a sample .rp file with an example of this working unless and until you add certain other interactions?

I’ve tried this in both RP 10 and RP 9 and haven’t found a difference between them in how radio button widgets behave. But, if you’ve only tried this with Jorkin’s file posted above, I can understand how you’d assume this. There is a bug in the Update Rows action on the radio buttons. It accidentally tries to update a column named, “Column1” which does not exist in the repeater, so there is no result of clicking on an unselected radio button in the repeater. By changing this to update the (obviously intended) “Gender” column, everything works as expected.

Here is an updated .rp file with further description and demonstration of a working solution:
sort by radio button - RP9.rp (119.8 KB)


From your initial description, it seems like you intend to have a single radio button per row, and only one row selectable. When it is selected, that row should be sorted to the top (…or bottom?).

Here is a demonstration of how this can work. I created it in RP 10 because this post is in the RP 10 forum section, and I wanted to test it out in both latest versions of Axure.
sort repeater by selection.rp (68.6 KB)

  • I dragged in a Repeater Table widget and added a radio button widget to this repeater.
  • I assigned a Radio Group to the radio button, and unchecked the repeater’s “Isolate Radio Groups” so that only a single row’s radio button can be selected.
  • I added a column named, “Select_State”.
  • For demonstration purposes, I set each row’s value to “0” (It works the same if the column values are blank.)
    • I also added a rectangle widget behind the radio button, named, “bg”, styled with small, right-aligned blue text in order to show the value of the “Select_State” column …and assigned that column to the “bg” widget.
    • This will show the actual value of the “Select_State” column. You can remove this connected widget in the datasheet if you’d like.
  • To the radio button, I assigned Selected and Unselected events that update the repeater by using Edit Row Data event to set the “Select_State” value to either 1 or 0. (In RP 9 this is done with the Update Rows event.)
    • For safety’s sake, I added conditional cases so the Edit Row Data is only triggered if a change needs to happen. This should prevent a possible “runaway recursive loop” in which a selection change triggers a repeater update which in turns triggers another selection change. (But, as seen in Jorkin’s file, this seems to be prevented already.)
  • When a radio button is clicked, it gets selected (that is built in to the radio button widget), which updates that row, which gets sorted to the top.
    • All of this happens very fast, so it can be difficult to tell that a radio button has actually responded to the selection, at least initially, because the row that is clicked gets immediately sorted to the top, and is replaced with an unselected row and radio button.
  • I duplicated the repeater and added in an animated transition, so a selected radio button is initially shown as selected in the same location for 300 ms, then the repeater is hidden, updated, then shown with a “slide down” animation.
    • There are conditional cases to test if the sort is in effect so this animation doesn’t happen if the repeater is not sorted.