Update items per row when an action is triggered

repeater-widget
#1

Is there a way to update items per row when an action is triggered?
Ex: I have 2 cards showing in row and when I increase the width of the panel I want 3 or more cards displayed in a row

#2

Yes, you can do this, but it depends on how you’ve set up your repeater, the repeater datasheet, and the “cards” in a row. For example, in each row, are there always 3 cards, but only room to show 2 cards without horizontal scrolling? Or, are there only 2 cards if “narrow” and a third card only available if “wide”? If “narrow” would the third card be shown in the second row, but then if “wide” it would be shown in first row? (…much harder to handle, by the way.)

In general, you can use the dynamic panel’s Resized event to control behavior and layout of the repeater within it. You should also ensure the repeater’s “Fit to Content in HTML” checkbox is checked, which will allow it to automatically resize based on the visible content.

For a basic setup, let’s say you have three widgets in each repeater cell (row) …They could be Groups or Dynamic Panels, each with child widgets, but let’s call the basic widgets Card1, Card2 and Card3. By default, Card3 is hidden so each repeater row shows 2 cards. For simplicity, the dynamic panel housing the repeater is 200 px, and a button click sets it to 300 px, thus triggering Card3 in each row to be shown, thus increasing the width of the repeater.
Here is the basic interaction code for your dynamic panel:

RESIZED
Case 1
If “[[This.width]]” is greater than “200”
Show/Hide
Show Card3

Case 2
Else if true
Show/Hide
Hide Card3

Because Card3 is located in your repeater cell, showing/hiding it in this manner–from outside the repeater–will affect each and every row in the repeater. in this example, nothing special is needed from the repeater.