Move sorting arrow to repeater dataset length

[ccgraphicdesigner]

column_arrow_position.rp (55.3 KB)
So the question is simple, I would like to have table header also as an horizontal repeater. I would like to position the arrow that are used for sorting purpose, to the right of the column title widget. On the canvas apparently works but on preview not…
What do I miss? What I do wrong?

Can you help me?

[JMW]

You’re being hit by this bug:

Not fitting with "Fit to Content in HTML" in Repeater when DP state change or show/hide from Action

I’ve recently been using a Repeater to create a horizontal menu - the “Fit to Content in HTML” is a must… I wanted the First and Last items of the menu to have a different Widget Style, and whilst I can attach to “OnItemLoad” and determine which is the first and last quite easily, I obviously can’t dynamically set the Widget Style as Axure doesn’t support this. The solution was to have multiple different Items within the repeater and Show/Hide the ones applicable for the first, middle and last…

[ccgraphicdesigner]

Ok so is a bug? because actually as you can see in the RP file, if I change the length of the text widget in the dataset, the arrows moves accordingly, that is GREAT… but when I go in preview… it does not work, I tried with the fit to Content in HTML, but still does not work…

[JMW]

Yes that’s right.

Investigating this further right now, the bug seems to be that at run time, text widgets never actually resize. You can validate this by giving them a colored background.

Unfortunately then, it seems that the only way of doing this reliably is to store the position of the arrow heads separately, like this:

column_arrow_position (1).rp (56.5 KB)

[ccgraphicdesigner]

So this means basically calculate manually the value? how did you get them? just trying?

[huban]

You can get the widths dynamically, but you have to use JavaScript injection to do it:
column_arrow_position.rp (79.8 KB)

[JMW]

Yes, if you don’t want to go the JavaScript route, I believe that’s the only way.

[JMW]

Does that last assignment in the JavaScript serve any purpose, or can the variable name be omitted?

[huban]

Oops. Yeah. I was using that variable for troubleshooting. You should be able to remove the declaration and just use the set text method that’s there.

[JMW]

Do I take it from what I see here, that whilst its possible to set a widgets text from JavaScript, it is not possible to set its width?

[huban]

You can if you want:

$axure(‘#’+columnWgtId).resize({width: columnWidth}, {});

I’m not a programmer by any stretch of the imagination so over the years, it’s just kind of habit for me to rely as little as possible on the JavaScript and get back to using native Axure features as soon as I can. I find it’s easier to tweak and troubleshoot using the GUI instead of putting a bunch of logic and calculations in the JavaScript.

For example: For me, doing the whole “default size” thing is a lot easier to do in Axure than with code.

[JMW]

Funny thing tho’ - as a programmer, I like to do the complete opposite, boiling everything down to the smallest I can in order to keep things uncluttered.

Even though I’m not the original poster I’d like to say thanks again for your input on this stuff - this one’s going to help me too.

Here’s my stripped-back version of what you’ve supplied:
column_arrow_position - JavaScript optomized.rp (75.2 KB)