HTML5 Data Bindings Formatter Support Product Page
Answered
Format repeat region rows with different colors?
Asked 04 Apr 2014 02:38:52
1
has this question
04 Apr 2014 02:38:52 William Andrews posted:
Is it possible to format the background of even and odd repeat region rows with different colors? Replies
Replied 04 Apr 2014 09:27:29
04 Apr 2014 09:27:29 Teodor Kuduschiev replied:
Hello William,
1. Select your repeating element (div or whatever container you are repeating)
2. Under Repeat Regions in the Data Bindings Panel expand your repeat region
3. Select $oddeven select Bind To: div.class and click the Bind button
This adds the following class to your container:
$oddeven returns 0 for odd and 1 for even. So you can add by hand some text there, for example:
This is going to assign class oddeven0 for the odd and oddeven1 for the even rows.
Then you can just define these two classes in your css:
1. Select your repeating element (div or whatever container you are repeating)
2. Under Repeat Regions in the Data Bindings Panel expand your repeat region
3. Select $oddeven select Bind To: div.class and click the Bind button
This adds the following class to your container:
class="{{$oddeven}}"
$oddeven returns 0 for odd and 1 for even. So you can add by hand some text there, for example:
class="oddeven{{$oddeven}}"
This is going to assign class oddeven0 for the odd and oddeven1 for the even rows.
Then you can just define these two classes in your css:
.oddeven0 { styles for odd row go here } .oddeven1 { styles for even row go here }
Replied 16 Sep 2024 17:47:20
16 Sep 2024 17:47:20 User replied:
When working with tables or data grids, formatting repeat region rows with different colors can enhance readability and improve the user experience. Alternating row colors, also known as zebra striping, helps distinguish between rows, making it easier to scan and interpret data. This technique is particularly useful for large datasets. Interestingly, the concept can be linked to the 4 color personality test, where each color represents a different personality type. Similarly, using distinct colors for rows can symbolize different data groups or categories, creating a visually organized and intuitive layout.