How to show/hide inserted columns based on global filter selection?

Issue #603 resolved
vinoth kumar created an issue

I’m looking for an option to show/hide the inserted columns based on the Global Filter selection.

I’m currently using the following js code in conjunction with beforeTableUpdate/afterTableUpdate settings to show the hidden inserted columns based on Global filter selection. But, this is creating a bad user experience as the JS code gets executed more than once and the columns are getting shown and hidden few times before completely rendering (it looks like the columns are playing hide and seek). This function also gets executed when there is a change to the other Global dimension selection changes or while hitting the refresh button.

apq-c3-custom\js\custom-hook-functions.service.js

showInsertedColumns(table) {

    let hotTable = table.hotRegisterer.getInstance(table.key + '-tableInstance');

    let filterValue = this.Settings.settings['Instance.Dimension1.Dimension1];

    CustomHookFunctions.self.$timeout(() => {
    },5000).then(() => {
        if( filterValue == 'xyz' ) {
            let plugin = hotTable.getPlugin('hiddenColumns');
            plugin.showColumn(5, 6);
            hotTable.render();
        }
    })

    return Promise.resolve();

}

I noticed that there is an advanced setting showInsertedRowsAndColumns to show/hide inserted rows. Do you think I can manipulate this setting based on the Global Filter selection?

If this is not possible, can you let me know if there is a way to improve the js function to provide a better user experience.

PS: I also tried playing with the timeout settings in the function. With a lower timeout, the experience is even worser.

Comments (3)

  1. vinoth kumar reporter

    I dove deep and understood that showInsertedRowsAndColumns is a boolean flag and can be set from the js function.

    So updated my code as follows and it works like charm. Leaving the code here for fellow members:

    UpdateInsertedColumns(table) {
    
        let filterValue = this.Settings.settings['Instance.Dimension1.Dimension1];
    
        if( filterValue != 'xyz' ) {
                table.showInsertedRowsAndColumns = false;
            } else {
                table.showInsertedRowsAndColumns = true;
            }
    
        return Promise.resolve();
    
    }
    

  2. Log in to comment