Hey!
We truly hope that our free tool comes in handy for your business, especially these days. Follow our news, stay safe & pivot on!

Unable to hide unused grid

Resolved

This is related to this question
I tried the example in the answer & it worked. But if I put it inside a function it will throw TypeError.
Here are my codes, the only different from the example is that it calls setupTable() function:

<meta charset=”ISO-8859-1″>
<link href=”https://cdn.webdatarocks.com/latest/webdatarocks.min.css” rel=”stylesheet” />
<script src=”https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js”></script>
<script src=”https://cdn.webdatarocks.com/latest/webdatarocks.js”></script>
</head>
<body>
<div id=”wrap”>
<div id=”output”>
</div>
<script type=”text/javascript”>
setupTable();

function setupTable() {
var pivot = new WebDataRocks({
container: “#output”,
width: “100%”,
height: “100%”,
report: {
dataSource: {
filename: “https://cdn.webdatarocks.com/data/data.csv”
},
slice: {
rows: [{ uniqueName: “Color” }],
columns: [{ uniqueName: “Category” }, { uniqueName: “Country” }],
measures: [{ uniqueName: “Price” }]
},
options: {
grid: {
showTotals: “off”
}
}
}
});
webdatarocks.on(“reportchange”, ‘redraw’);
webdatarocks.on(“reportcomplete”, ‘redraw’);
function redraw() {
let col = 0, row = 0;
webdatarocks.customizeCell(function(cellBuilder, cellData) {
if (cellData.columnIndex > col) col = cellData.columnIndex;
if (cellData.rowIndex > row) row = cellData.rowIndex;
});
webdatarocks.on(“aftergriddraw”, function() {
webdatarocks.off(“aftergriddraw”);
document.querySelector(“#wrap”).style.width = 100 * (col + 2) + ‘px’;
document.querySelector(“#wrap”).style.height = 30 * ++row + 27 + ‘px’;
});
}
}
</script>
</body>
</html>
 
The details of the error is:
webdatarocks.js:11 Uncaught TypeError: Cannot read property ‘call’ of undefined
at b.e.dispatch (webdatarocks.js:11)
at webdatarocks.js:1849
 
How to resolve this issue?
 

1 answer

WebDataRocks Team WebDataRocks December 9, 2020

Hello, Ien,
 
Thank you for your question.
 
We suggest subscribing to the reportcomplete and reportchange events within the Flexmonster constructor to avoid the described issue:

var pivot = new WebDataRocks({
container: "#output",
width: "100%",
height: "100%",
report: {
dataSource: {
filename: "https://cdn.webdatarocks.com/data/data.csv"
},
slice: {
rows: [{ uniqueName: "Color" }],
columns: [{ uniqueName: "Category" }, { uniqueName: "Country" }],
measures: [{ uniqueName: "Price" }]
},
options: {
grid: {
showTotals: "off"
}
}
},
reportcomplete: redraw,
reportchange: redraw
});

 
We have modified the initial example to demonstrate this approach.
 
Our team hopes it works for your case.
 
Kind regards,
WebDataRocks Team