beforegriddraw & aftergriddraw
Events
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">The component will appear here</div>
JavaScript
var pivot = new Flexmonster({
container: "pivot-container",
componentFolder: "https://cdn.flexmonster.com/",
toolbar: true,
report: {
dataSource: {
data: getData()
},
"slice": {
"rows": [
{"uniqueName": "Color"}
],
"columns": [
{"uniqueName": "Country"},
{"uniqueName": "[Measures]"}
],
"measures": [
{"uniqueName": "Price",
"aggregation": "sum"}
]
}
}
});
flexmonster.on('beforegriddraw', function (params) {
if (params.smooth == false)
console.log('Before grid draw with row/column scroll!');
else
console.log('Before grid draw with pixel scroll!');
});
flexmonster.on('aftergriddraw', function (e) {
if (e.smooth == false)
console.log('After grid draw with row/column scroll!');
else
console.log('After grid draw with pixel scroll!');
flexmonster.showGrid();
});
function getData() {
return [{
"Color": "green",
"M": "September",
"W": "Wed",
"Country": "Canada",
"State": "Ontario",
"City": "Toronto",
"Price": 174,
"Quantity": 22
}, {
"Color": "red",
"M": "March",
"W": "Mon",
"Time": "1000",
"Country": "USA",
"State": "California",
"City": "Los Angeles",
"Price": 1664,
"Quantity": 19
}, {
"Color": "red",
"M": "January",
"W": "Mon",
"Country": "Canada",
"State": "Quebec",
"City": "Montreal",
"Price": 1190,
"Quantity": 292
}, {
"Color": "green",
"D": "04/08/2014",
"M": "August",
"W": "Fri",
"Time": "1000",
"Country": "USA",
"State": "California",
"City": "Los Angeles",
"Price": 1222,
"Quantity": 730
}, {
"Color": "white",
"M": "March",
"W": "Wed",
"Country": "USA",
"State": "California",
"City": "Los Angeles",
"Price": 7941,
"Quantity": 73
}, {
"Color": "red",
"M": "August",
"W": "Wed",
"Country":...