Back to forum

Unable to hide unused grid

posted on November 25th, 2020

Resolved
len asked November 25, 2020

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

Move up