Jump to content
bbeshlian

Hide Columns on Tabular Report When Empty

Recommended Posts


Hi @bbeshlian ,

Here is a snippet of JavaScript and JQuery code to hide columns if they are empty:
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
document.addEventListener('DataPageReady', function(e) {
    let $table = $('.cbResultSetTable:first');
    let tbody = $table[0].tBodies[0];
    let colsLen = tbody.rows[0].cells.length,
        rowsLen = tbody.rows.length;

    let hideNode = function(node) {
        if (node) node.style.display = "none";
    };

    for (var j = 0; j < colsLen; ++j) {
        let counter = 0;
        for (var i = 1; i < rowsLen; ++i) {
            if (tbody.rows[i].cells[j].textContent.trim() == '') ++counter;
        }
        if (counter == (rowsLen - 1)) {
            for (var i = 1; i < rowsLen; ++i) {
                hideNode(tbody.rows[i].cells[j]);
            }
            hideNode(tbody.rows[0].cells[j]);
        }
    }
});
</script>

You should put the code above into the Footer element on the Search and Report Wizard - Configure Results Page Fields.

Share this post


Link to post
Share on other sites

The below code hides empty columns on the weekly calendar report datapage:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
document.addEventListener('DataPageReady', function() {
        let $table = $('.cbResultSetCalendar:first');
        let tbody = $table[0].tBodies[0];
        let colsLen = tbody.rows[0].cells.length,
            rowsLen = tbody.rows.length;

        let hideNode = function(node) {
            if (node) node.style.display = "none";
        };

        for (var j = 0; j < colsLen; ++j) {
            let counter = 0;
            for (var i = 1; i < rowsLen; ++i) {
                if (tbody.rows[i].cells[j].childNodes.length == 1) ++counter;
            }
            if (counter == (rowsLen - 1)) {
                for (var i = 1; i < rowsLen; ++i) {
                    hideNode(tbody.rows[i].cells[j]);
                }
                hideNode(tbody.rows[0].cells[j]);
            }
        }
    });
</script>

Share this post


Link to post
Share on other sites

If you want to hide empty days on the monthly calendar report datapage, feel free to use the code below:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 
<script>
document.addEventListener('DataPageReady', function() {
    let $table = $('.cbResultSetCalendar:first');
    let tbody = $table[0].tBodies[0];
    let colsLen = tbody.rows[0].cells.length,
        rowsLen = tbody.rows.length;

    let hideNode = function(node) {
        if (node) node.style.opacity = "0";
    };

    let hideNode2 = function(node) {
        if (node) node.style.display = "none";
    };

    for (var i = 1; i < rowsLen; ++i) {
        let counter = 0;
        for (var j = 0; j < colsLen; ++j) {
            if (tbody.rows[i].cells[j].childNodes.length == 1) {
                ++counter;
            }
        }

        if (counter == colsLen) {
            for (var j = 0; j < colsLen; ++j) {
                hideNode2(tbody.rows[i].cells[j]);
            }
        } else {
            for (var j = 0; j < colsLen; ++j) {
                if (tbody.rows[i].cells[j].childNodes.length == 1) {
                    hideNode(tbody.rows[i].cells[j]);
                }
            }
        }
    }
});
</script>

 

Share this post


Link to post
Share on other sites
On 12/11/2018 at 10:16 AM, Alison said:


Hi @bbeshlian ,

Here is a snippet of JavaScript and JQuery code to hide columns if they are empty:
 


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
document.addEventListener('DataPageReady', function(e) {
    let $table = $('.cbResultSetTable:first');
    let tbody = $table[0].tBodies[0];
    let colsLen = tbody.rows[0].cells.length,
        rowsLen = tbody.rows.length;

    let hideNode = function(node) {
        if (node) node.style.display = "none";
    };

    for (var j = 0; j < colsLen; ++j) {
        let counter = 0;
        for (var i = 1; i < rowsLen; ++i) {
            if (tbody.rows[i].cells[j].textContent.trim() == '') ++counter;
        }
        if (counter == (rowsLen - 1)) {
            for (var i = 1; i < rowsLen; ++i) {
                hideNode(tbody.rows[i].cells[j]);
            }
            hideNode(tbody.rows[0].cells[j]);
        }
    }
});
</script>

You should put the code above into the Footer element on the Search and Report Wizard - Configure Results Page Fields.

Hello Alison,

This is not working for me. I have placed this in the footer of Configure Results Page Fields but there are two columns with no values in any of the results and they still display in my tabular report. I tried putting the link to jQuery in my HTML page as well with no luck. The empty fields I am trying to hide are 1) a text field and 2) a foreign key field. Are there any qualifiers to add or other issues that might be affecting my success?

Thank you!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...