Hide Column button no longer working

[Deanobeano2]

Norm

I just noticed that the code you kindly supplied to hide/display a column is no longer working. Did you change something? Could this now be achieved using the _hsc keyword instead?

The code supplied was:
const MY_TOGGLE_COLUMNS_VISIBILITY_GRID = 'view_695';
$(document).on('knack-view-render.' + MY_TOGGLE_COLUMNS_VISIBILITY_GRID, function (event, view, data) {
const gridViewButtonsDiv = document.createElement('div');
gridViewButtonsDiv.setAttribute('id', 'gridViewBtnDiv');
gridViewButtonsDiv.style.marginTop = '10px';
gridViewButtonsDiv.style.marginBottom = '30px';

const div = document.querySelector('#' + view.key);
if (div) {
    div.prepend(gridViewButtonsDiv);
    var visible = false;
    var toggleColumnVisibilityBtn = ktl.fields.addButton(gridViewButtonsDiv, 'View Columns', '', ['kn-button', 'ktlButtonMargin']);
    toggleColumnVisibilityBtn.addEventListener('click', function (event) {
        if (visible) {
            toggleColumnVisibilityBtn.textContent = 'View Columns';
            $('#' + view.key + ' .ktlDisplayNone_tmpoff').addClass('ktlDisplayNone');
            $('#' + view.key + ' .ktlDisplayNone_tmpoff').removeClass('ktlDisplayNone_tmpoff');
        } else {
            toggleColumnVisibilityBtn.textContent = 'Hide Columns';
            $('#' + view.key + ' .ktlDisplayNone').addClass('ktlDisplayNone_tmpoff');
            $('#' + view.key + ' .ktlDisplayNone').removeClass('ktlDisplayNone');
        }
        visible = !visible;
    })
}

})

Dean

[cortexrd]

Yes, you're right. Some code has changed around this ktlDisplayNone class.

Here's the new code that should work:

const MY_TOGGLE_COLUMNS_VISIBILITY_GRID = 'view_695';
$(document).on('knack-view-render.' + MY_TOGGLE_COLUMNS_VISIBILITY_GRID, function (event, view, data) {
    const gridViewButtonsDiv = document.createElement('div');
    gridViewButtonsDiv.setAttribute('id', 'gridViewBtnDiv');
    gridViewButtonsDiv.style.marginTop = '10px';
    gridViewButtonsDiv.style.marginBottom = '30px';

    const div = document.querySelector('#' + view.key);
    if (div) {
        div.prepend(gridViewButtonsDiv);
        var visible = false;
        var toggleColumnVisibilityBtn = ktl.fields.addButton(gridViewButtonsDiv, 'View Columns', '', ['kn-button', 'ktlButtonMargin']);
        toggleColumnVisibilityBtn.addEventListener('click', function (event) {
            if (visible) {
                toggleColumnVisibilityBtn.textContent = 'View Columns';
                $('#' + view.key + ' .dis_ktlDisplayNone').addClass('ktlDisplayNone_hc');
                $('#' + view.key + ' .dis_ktlDisplayNone').removeClass('dis_ktlDisplayNone');
            } else {
                toggleColumnVisibilityBtn.textContent = 'Hide Columns';
                $('#' + view.key + ' .ktlDisplayNone_hc').addClass('dis_ktlDisplayNone');
                $('#' + view.key + ' .ktlDisplayNone_hc').removeClass('ktlDisplayNone_hc');
            }
            visible = !visible;
        })
    }
})

The _hsc keyword doesn't do quite the same thing though. It enables the user to choose which columns is collapsed and save them as part of a User Filter for quick recall. Much more powerful! Give it a try...

Cheers,
Norm

[Deanobeano2]

Back working again.

Thank you very much.

[cortexrd]

Good!

Can you click Mark as answer to close the discussion please?