Alternate row color for a group/level

Hello, Rushi!
 
Thank you for reaching out to us.
 
Kindly note that you can achieve the described behavior in two ways.
 
1. Using the customizeCell approach

We have described how to use the customizeCell in Blazor in the following thread: https://www.flexmonster.com/question/using-hierarchies-and-measures/.

For example, to highlight the "Alameda Health System" member and all rows of its child hierarchy in white, and the "Appalachian" block in gray, the code would look as follows:

const highlightedMembers = {
  "HealthSystemName": ["Alameda Health System", "Appalachian"]
};

const highlightedClasses = {
  "Alameda Health System": "white",
  "Appalachian": "gray",
}

function customizeCellFunction(cell, data) {
  if (data.rows) {
    data.rows.forEach(row => {
      if (highlightedMembers[row.hierarchyName] &&
        highlightedMembers[row.hierarchyName].includes(row.caption)) {
        cell.addClass(highlightedClasses[row.caption]);
      }
    });
  }
}

CSS:

#fm-pivot-view .fm-grid-view div.fm-cell.gray{
  background-color: #e6e6e6!important;
}


#fm-pivot-view .fm-grid-view div.fm-cell.white{
  background-color: #fff!important;
}

Here is a JSFiddle illustrating the described approach: https://jsfiddle.net/flexmonster/dx7mkez5/.
 
2. By overriding Flexmonster's CSS styles
If you know exactly the number of rows that should have different colors, you can also override our CSS classes as follows:

[data-r="7"].fm-cell,
[data-r="8"].fm-cell,
[data-r="9"].fm-cell{
  background-color: #e6e6e6 !important;
}

We have prepared a JSFiddle example for visualization: https://jsfiddle.net/flexmonster/kc8fm9g6/.
 
Hope it helps.
Feel free to contact us if any other questions arise.
 
Best regards,
Solomiia

Hello, Rushi!

Thank you for your feedback.

We are happy to hear that our examples are helpful in making your own generic approach.

You are welcome to contact us if any further questions arise.

Kind regards,
Solomiia