I have a table with 5 rows, of which the 1st row has a data-repeat property while the rest is fixed. I need to have the rows alternately colored white and gray. For example 1st row is white while the 2nd row is gray then the 3rd would be white again, How could this be done in PReS Connect Designer?
You just need to apply a shading to the Details table.
First you need to define a new shading in the default.css, just copy an existing one (e.g. table-light-blue), rename to “table-grey” and modify the background color to your sort of grey you need.
Then add classes “table-grey shading” to the html table in the source code.
That should have the effect of alternating grey and white rows.
And that way you also could change the grid and text color of your table.
This works with a static or fixed table but unfortunately, this seems not to work with a table that contains a row with “data-repeat” function and fixed rows, the result is:
1st row (with data-repeat) - grey
2nd row (created also from data-repeat function) - white
3rd row (fixed row) - white
4th row (fixed row) - grey
5th row (fixed row)- white
you’re mixing a dynamic detail rows with fixed rows?
That’s indeed not working the way I’ve outlined above.
I think in that case you need to overwrite the background color of the fixed rows by a script to get the proper sequence.
You could assign classes “row1” and “row2” to subsequent fixed rows (alternating of course) and check in a script (separate ones for selector .row1 and .row2) what background color needs to be assigned to these rows by counting the amount of elements in the detail table (i.e. length of the table) and then assigning the color by: results.css(“background-color”, “grey”) (or “white” resp.). Odd number of details need .row1 to have white background and .row2 getting grey background and vice versa.