Alternate colour for every two rows in grid
Hi,
We have a requirement to show alternate background colour for every two rows in a repeat grid, as shown below:
Had a look at 'Odd rows' and 'Even rows' style definitions for grids but not sure how to define these styles for group of rows.
Could anybody suggest how to define this style format for grids in skin rule in Pega 7.1.7?
Thanks,
Murali
Accepted Solution
Updated: 24 Apr 2016 3:18 EDT
Hi Murali,
There is one more easy CSS approach using nth-child pseudo selector.
Code Snippet:
div.gridDefault tr.cellCont:nth-child(4n+2), div.gridDefault tr.cellCont:nth-child(4n-1) {
background-color: blueviolet !important;
}
div.gridDefault tr.cellCont:nth-child(4n), div.gridDefault tr.cellCont:nth-child(4n+1) {
background-color: coral !important;
}
Runtime :
Leaving the first header TR we have to target the other rows like below,
(2,3) (6,7) (10,11) - Say Color A
(4,5) (8,9) (12,13) - Say Color B
Expressions for nth-child selector:
2, 6, 10 - 4n+2 (Color A)
3,7,11 - 4n-1 (Color A)
4,8,12 - 4n (Color B)
5,9,13 - 4n+1 (Color B)
Pegasystems Inc.
IN
Hi Murali, Good morning!
would it be convincing to ...
- add a flag property
- populate the property (let's say to true) in the desired sequence of pxResults
- apply inline style [<pega:when name="IsFlagTrue">background-color: gray;</pega:when>]
Please note applying inline style is a guardrail violation. So will seek to learn if there is any OOTB approach of doing via Skin or custom css.
Please share your thoughts/comments, Thank you!
psahukaru
Infosys
AU
Thanks Phani. Approach suggested by you sounds much simpler than the current work-around I thought of. Will try this out.
Please let me know if you find OOTB approach of doing this via skin.
Murali...
Accepted Solution
Updated: 24 Apr 2016 3:18 EDT
Hi Murali,
There is one more easy CSS approach using nth-child pseudo selector.
Code Snippet:
div.gridDefault tr.cellCont:nth-child(4n+2), div.gridDefault tr.cellCont:nth-child(4n-1) {
background-color: blueviolet !important;
}
div.gridDefault tr.cellCont:nth-child(4n), div.gridDefault tr.cellCont:nth-child(4n+1) {
background-color: coral !important;
}
Runtime :
Leaving the first header TR we have to target the other rows like below,
(2,3) (6,7) (10,11) - Say Color A
(4,5) (8,9) (12,13) - Say Color B
Expressions for nth-child selector:
2, 6, 10 - 4n+2 (Color A)
3,7,11 - 4n-1 (Color A)
4,8,12 - 4n (Color B)
5,9,13 - 4n+1 (Color B)
Infosys
AU
Hi Sathish,
Thanks for giving detailed response. Looking for a similar solution. Have few follow-up questions:
a. Once I include the given code snippet in CSS file, where should I include this css file? In application's skin rule?
b. I have this requirement only for a specific grid of a specific use case and not for all grids in the application. So how do I mention this style in that particular grid options? Instead of gridDefault in above code snippet replace it by gridGridStyleName and mention "GridStyleName" as the other style in grid options below?
Murali...
The CSS file can be either included in the Skin rule (or) in the harness (under script & style tab) rule. This completely depends on your requirement. If you want the style to be targeted towards a specific grid in a harness then include it in harness rule else for anything generic go for the Skin rule.
How to target specific grid ?
For this you can create a custom format for the grid and mention the same in style field under presentation tab of the grid property panel. We actually generate DIV specific to this style in DOM (PFB snapshot).
Updated CSS:
div.gridDefault div.Worklist_grid tr.cellCont:nth-child(4n+2), div.gridDefault div.Worklist_grid tr.cellCont:nth-child(4n-1){
background-color: blueviolet !important;
}
Infosys
AU
Thanks again Sathish. For some reason styles getting applied to odd rows only but not for even rows. But you gave the solution I am looking for. I think I should now be able to achieve desired styles as per your suggestion.
Murali...