Styling rows based on the conditional formatting
Customize cells
HTML
<link rel="stylesheet" href="https://s3.amazonaws.com/flexmonster/2.3/demo.css">
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<div id="pivot-container"></div>
JavaScript
var pivot = new Flexmonster({
container: "pivot-container",
componentFolder: "https://cdn.flexmonster.com/",
width: "100%",
height: 500,
toolbar: true,
customizeCell: customizeCellFunction,
report: {
"dataSource": {
"data": getData()
},
"slice": {
"rows": [{
"uniqueName": "Country"
}, {
"uniqueName": "Business Type"
}, {
"uniqueName": "[Measures]"
}],
"columns": [{
"uniqueName": "Color"
}],
"measures": [{
"uniqueName": "Price"
}],
"expands": {
"rows": [
{
"tuple": [
"country.[australia]"
]
},
{
"tuple": [
"country.[canada]"
]
}
]
}
},
"options": {
"grid": {
"type": "classic"
}
},
"conditions": [
{
"formula": "#value > 500 AND #value < 600",
"isTotal": false,
"format": {
"backgroundColor": "#99CC66",
"color": "#000000",
"fontFamily": "Arial",
"fontSize": "12px"
}
}
]
},
beforegriddraw: function(e) {
if (e.smooth == false) {
cleanStyles = true;
}
},
aftergriddraw: function(e) {
addExtraStyles();
}
});
var cleanStyles = false;
var addStyles = false;
var rowsWithCondition = {};
var conditions = [];
var styleTag;
function cleanExtraStyles() {
var prevStyleTag = document.head.getElementsByTagName("style");
for (var i = 0; i < prevStyleTag.length; i++) {
if (prevStyleTag[i].innerHTML.indexOf("#fm-grid-layout div.fm-cell") == 0) {
if(window.ActiveXObject || "ActiveXObject" in window) {
prevStyleTag[i].removeNode(true);
} else {
prevStyleTag[i].remove();
}
}
}
}
function addExtraStyles() {
if (styleTag && addStyles) {
addStyles = false;
cleanExtraStyles();
document.head.appendChild(styleTag);
...