Dynamically change repeater item colour

repeater-widget

#1

Hi,

Is there anyway to dynamically change the background colour of an individual repeater item? I want the change to persist when sorted/filtered or new new rows added.

Thanks


#2

Yes, you can do this dynamically and persistently. The key thing for persistence is tracking your states (e.g., white or color, shown/hidden, true/false) in the repeater datasheet (values in a column) and controlling them in the Item Loaded event, as conditional cases. In a repeater, every time you touch it (sort, filter, edit, add/remove, etc) the whole repeater gets rebuilt–based on the repeater’s datasheet. So, if you change something directly in a repeater row without tracking that change then it won’t get rebuilt with the changes.

What is the extent of the change? Simply changing from transparent (or white) to one consistent color (e.g., red) or change it among a set of colors (e.g., color could be red, black, blue or white)? Either way, you could have a column named, “Color” and set/get the values with the expression [[Item.Color]] . To change the color for a specific row/item you would call Update Rows and specify the row with a rule, like [[Item.Num == 3]] --or otherwise Mark the target row(s), and set the Color value to something. In the repeater’s Item Loaded event, include a conditional case like,

If [[Item.Color]] equals “true”
Set Selected/Checked MyBackgroundWidget to “true”

It’s important to note this applies for actions within the repeater as well. For example, if a user clicks a button in the repeater to update the color, don’t just immediately hide/show or change selection state–however you change the color–but rather update “This” row in the repeater.

You can’t directly change the color property of a widget, but you can “change the color” within a limited set of predefined colors. If there are 3 or fewer colors you can programmatically change these using the Interaction Styles and changing it’s selection state between normal, selected, and if needed, disabled. Or, you could style duplicate widgets and just hide/show them. If there are more than 3 colors or styles I recommend using a Dynamic Panel and creating a unique state for each style, then just change the state as needed.

Here is a quick demonstration
repeater dynamically change color.rp (56.4 KB)