Calumo – Freeze Panes in Online Reports

Creating great-looking online reports in Calumo is easy. But sometimes, especially with financial-style reports, it’s useful to freeze headings at the top and/or columns to the left.

For more Calumo Consulting and Calumo Support Tips go back to CALUMO Tips & Tricks

Javascript to ensure reports keep the correct row alignment, add this to the report assets as shown in the video above:

function syncFreeze() {
    var q2 = report.api.getElements(".quad2");
    var q3 = report.api.getElements(".quad3");
    var q4 = report.api.getElements(".quad4");
    // Sync Quad1 with Quad2
    if (q2.exists()) {
        var q1Rows = report.api.getElements(".quad1 tr");
        _.each(q1Rows, function(row) {
            var $leftRow = $(row);
            var $rightRow = $(q2).find("#" + $leftRow.attr("id"));
            if ($rightRow.length > 0) {
                var leftHeight = $leftRow[0].getBoundingClientRect().height;
                var rightHeight = $rightRow[0].getBoundingClientRect().height;
                var height = Math.max(leftHeight, rightHeight);
                $leftRow.height(height);
                $rightRow.height(height);
            }
        });
    }
    // Sync Quad3 with Quad4
    if (q3.exists() && q4.exists()) {
        var q3Rows = report.api.getElements(".quad3 tr");
        _.each(q3Rows, function(row) {
            var $leftRow = $(row);
            var $rightRow = $(q4).find("#" + $leftRow.attr("id"));
            if ($rightRow.length > 0) {
                var leftHeight = $leftRow[0].getBoundingClientRect().height;
                var rightHeight = $rightRow[0].getBoundingClientRect().height;
                var height = Math.max(leftHeight, rightHeight);
                $leftRow.height(height);
                $rightRow.height(height);
            }
        });
    } else {
        console.warn("Either quad3 or quad4 is missing.");
    }
}
// Re-run syncFreeze on window resize/zoom
function handleResize() {
    syncFreeze();
}
window.addEventListener('resize', handleResize);
window.addEventListener('load', handleResize);
// Optionally, if zoom is causing issues, you can monitor changes to width
window.addEventListener('resize', function() {
    if (window.innerWidth !== window.outerWidth) {
        syncFreeze();
    }
});
// Initial trigger
report.api.bind('postrender', function(e) {
    syncFreeze();
});