Bug in updating repeater rows

Repeater.Bug.rp (46.9 KB)

  1. I have a repeater with horizontal layout

  2. Repeater is a simple table with Id, Title and a State attribute. As usual, repeater has an Item Loaded action for item text initialization

  3. I am trying to change the state attribute of the specific repeater item when clicking on it, so I made an onclick action on repeater element

  4. This is how this panel is displayed by default
    image

  5. This is how it is displayed after clicking on repeater element
    image
    Expected behaviour:
    repeater elements does not change their position, because updated attribute (“State”) does not initialize any repeater children’s text in outline tree

How can I change repeater row without moving elements?
See attached prototype

…Except you are updating the repeater when you click on the “MyLabel” widget in the repeater cell, which triggers the repeater’s Item Loaded event, thus “initializing” the text with its Set Text action.

There is a known bug with repeaters in which widgets set to “Fit to Text Width” only get set once and don’t respond to dynamic text changes. Actually, this constraint applies to any widget in or outside of a repeater–the widget width only gets set at page load, not dynamically thereafter, but is especially problematic and unexpected with repeaters. Some workarounds I can suggest:

  1. Don’t use a repeater for horizontal menus like this.
  2. Use a fixed-width font (e.g., Courier or System) instead of a proportional font and set the size of MyLabel when you set the text in Item Loaded based on the number of chars, so if a character at the font size used is say, 12 px wide, then use “Set Size of MyLabel to [[Item.Title.length * 12]]”.
  3. Allow enough width in the widget to accommodate all possible text values in the repeater’s datasheet.
  4. If your Title labels can be classified into short, medium, long strings, then you could use a dynamic panel with 3 states, Short, Medium, Long, each with enough width to fit the class of string length.
  5. Use some javascript to calculate the width of the text. This method is not officially supported by Axure, so use at your own discretion. See this thread for an example: