Alternating row color?

Is there a way to present the data in a table format with alternating row colors?

Hey Jim

The user melibrion posted a file here that cleverly uses dynamic panels for the color change: Facets filters Note that there is some clipping occurring if you using the DP the same size as the repeater cell, hence you have to make the color rectangles wider.

Then you can use the orientation options of the repeater to style it as a table.

light_forger

1 Like

I’m trying to use light_forger’s example of setting the state of a dynamic panel based on a property in my repeater but I can’t seem to get it to work. The most obvious difference is that the property I am using to determine the row color is NOT displayed in the repeater (I have a property called color and it’s set to either a or b). Does the property have to be visible to work with the interactions?

Nateha,

The example is not mine. It is melibrion’s, who was gracious enough to provide his .rp file.

Without looking at the file, it will be hard to determine how you have the logic set up, and thus answer you correctly. I don’t think the property has to be visible in order to drive what’s being displayed, because I am assuming you have the property as part of the same data table.

Hope this helps!

light_forger

Apologies, misunderstood whose example that was. Thanks to @melibrion :slight_smile:

I’ve attached a file with just the repeater set up. I was using a DP that just has a shaded blue rectangle on it that is either visible or hidden based on the .color property of each item in the repeater. Not sure what I’m missing, but if you have a chance to take a look I’d appreciate it. Thanks!
repeater example.rp (73 KB)

Hi Nateha,

I could not get it to work with Show/Hide events. For some reason, these did not trigger. I wonder if it is a bug.

Instead, I used a 2-state DP similar to yours. For sake of contrast, I used light and dark gray as the colors, but if you want transparent and opaque states alternating, just remove the content in one of the states.

Hopefully this solves your problem!

light_forger
nateha - 7.0 repeater example light_forger.rp (68.3 KB)

Thanks for the replies guys. I’ve been so busy lately I haven’t been able to work on this.

Your solution works fine until you add or remove an item from the list. I should have been more detailed and described the problem I was running into in my original post.

I can write something that will figure out the last color and set the alternate, but it is a sloppy way of doing it since it is pulling back the complete array and will only pull the last item anyway.

The real problem comes when I remove an item and it is in the middle of the array. At that point it is no longer alternating.

I’m hoping the repeater widget gets more functionality in future beta releases.

Jim,

If we get access to indexing for both the repeater itself and the Selected Items for a repeater that would make it so much easier!

light_forger

1 Like

Interesting, I guess I’ll let the Axure team know and see what they say. Thanks for taking a look!

This is actually really simple using just a simple global variable. No need for a column to save the row color at all. Works even on inserting/deleting items and sorting.

Check it out here: AxShare
RP file: AlternatingRowColors_jaern.rp (69.8 KB)

4 Likes

jaren, that’s great!

Same principle, with hover efekt, add item or multiple items delete

https://dl.dropboxusercontent.com/u/2566847/axure/001/index.html#p=home

Source: rowcolor.rp (58.3 KB)

3 Likes

This is such an elegant solution and so easy to implement using the sample file. Thank you SO much!

There is another easy way using a Global Variable…

  1. Create a Global Variable called RowCount
  2. Add a colored rectangle behind your repeater row template (ex: RowColor)
  3. In the OnItemLoad event handler, increment the value of RowCount each time a new row is drawn by using “Set value of RowCount equal to [[RowCount + 1]]”
  4. Add a new “if” case to OnItemLoad to show RowColor when RowCount is not divisible by 2 (odd rows) - more specifically, the quotient contains a decimal point:
    Use a condition: If “[[RowCount / 2]]” contains “.” then “Show RowColor”
  5. Add a new “Else/If” case to OnItemLoad to hide RowColor on the alternating even rows using “Hide RowColor”
1 Like