Selecting One Item In The Repeater WIth Confirmation Modal + Expand/Collapse

Hi there,

Feels like a very simple thing to do but I am stuck here with a repeater.

  1. I want to toggle Today and collapse/expand all items between Today and Yesterday and pull/push below widgets.

  2. I want to toggle Yesterday and collapse/expand all items below Yesterday and pull/push below widgets.

  3. When you click or swipe ‘Dose’ item and then hit ‘Dose not taken’ you will see a modal. Clicking OK should grey out only the item selected, set the text to ‘Dose was taken’, strikethrough the flag icon and move the item back to initial position. My problem is that ALL items in the repeater get greyed out instead of only the selected one.

  4. Then I want to swipe the same item and click ‘Dose was taken’ which should revert all the changes made in 3. And there’s no problem in achieving that. In the current setup only the selected item will be reverted which is great.

I know that it’s because of this modal all items turn grey. But having it is crucial.

I’d appreciate your help a lot.

Thank you.

repeater.rp (537.5 KB)

https://j59u9j.axshare.com/

Here is a solution. I copied your page to “Solution 1” and modified.
repeater.rp (861.4 KB)

The way to do this with repeaters is to use the Add Filter action. This defines a rule for which rows to show in the repeater. Take a look at the “Today Pill Group” to see how the filter is defined and applied. I named the filter, “collapseToday” and set a rule of [[TargetItem.Today != '1']] which means, "Show all the rows in this repeater which do not have ‘1’ as a value in the “Today” column, or in other words, “Hide the ‘Today’ items”. When this filter (collapseToday) is removed, the ‘Today’ items show again. To keep track of whether ‘Today’ is collapsed or not, I set the Today column to the value of “collapsed” or “expanded” (but I could have also added another column just for this.) The “Yesterday Pill Group” works similarly.

Within a repeater, the “push/pull” happens automatically, but outside the repeater, there is no direct way to “push/pull” as you could if a widget was hidden/shown. To accomplish this, I wrapped the repeater in a dynamic panel and use the dynamic panel’s OnResize event to move your widget below the repeater.

When you dynamically change something in a repeater (like showing your grey box) from outside the repeater, it will happen in every row–in other words, it gets repeated. To do this for only one row, you can update the repeater with a rule that limits the action to that one row only. A common way to do this is to change the value of a repeater column and have the OnItemLoad event handle what to do based on that value. So, I created a column named, “Greyed” to control showing/hiding your grey box. When “Dose not taken” is clicked, it unmarks all rows and then marks only its own row. Then, when “OK” is clicked in the modal, it updates the “Greyed” column to value of “1” for marked rows (which by definition would be only that row which was just clicked–aha!) Then, in the repeater’s OnItemLoad, if the “Greyed” column has a value of “1” it shows the grey box (and the other actions you had on the OK button.)

2 Likes

You’re a lifesaver @mbc66!
Big thank you.

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