How to hide colums in a rendered grid?

Question

My goal is to allow a user to hide groups of columns (see the screenshots). My technique at the moment is to use the idea in this demo example. To remove the columns, the grid is refreshed so the columnRender event can be reapplied to show/hide different groups of columns. Is there a better way to achieve this effect? Is there a function that will just hide a column?

The problem with the technique I'm using is the width of the pivot view when columns have been removed is the same as the width of the pivot view so the last column is expanded . You can see from the second screenshot. The grid parameter 'allowAutoResize' is set to false.

If I adjust the width of the pivot view element manually to narrow the main element before calling refresh it doesn't matter as the grid will use the original size. I can destroy the pivot view and completely regenerate which works.

The first screenshot shows an example with all columns visible.

The second screenshot shows an example with four columns removed. You can see the same size grid is used but the last column is expanded.

Kokila Poovendran · Answer

Hi Bill,If you hide the specific columns using ColumnRender
event, the last column’s width stretches based on the pivot table width. Thus,
the last column renders with the width of the hidden column, this is the
default behaviour of pivot table. However, you can apply autofit to the last
column or you can set the width to the last column along with the autofit to
set the width for the last column. If we do so, the remaining spaces still
displays as empty column, this is our default behaviour. Please refer the below
code example.Code Example:

columnRender: function(args){
              for (var i = 0; i < args.stackedColumns.length; i++) {
                  if (args.stackedColumns[i].headerText == 'FY 2015') {
                    
  // Hide the FY 2015 column here.
                      args.stackedColumns[i].visible = false;
                  } 
                }
         
        // You can apply
  autofit to the last column alone.
                args.columns[args.columns.length-1].autoFit = true;
                                              
  // (OR)
             
  // Set the width for the last column along with autofit applied for this
  column.
              args.stackedColumns[args.stackedColumns.length-1].minWidth = 140;
          }

Output screenshot: Only autoFit applied:Width set to last
column along with autoFit:Meanwhile, we have prepared a sample for
your reference. Sample: https://stackblitz.com/edit/bsgxef-ekb8pf?file=index.html,index.jsRegards,Angelin Faith Sheeba.

Bill Seddon · Answer

Thanks for your reply. The example of applying autoFit to the last column is useful.

The original question had two parts. The first, about the size of the last column you have answered. Thanks. The other part was about the best way to hide existing columns.

https://stackblitz.com/edit/bsgxef-kdrfo6?file=index.html,index.js

In this example, I've extended your example to add a button. When the button is pressed the column FY 2016 is hidden. To do this, a global variable is set then the 'refresh' function of the pivotview is called. This redraws the pivot view which called the 'columnRender' event again and, so, the column is hidden.

Is there a better way to achieve this result? Because the data for the example is in the page the pivot view is redrawn very quickly. In my case the data source is a remote OLAP service so there is a very noticeable delay.

Is there a function to call that will hide columns by, for example, adding a class like e-hide to column cells?

Bill Seddon

Rajeshkannah G · Answer

Hi Bill,Rather than using the columnRender event, you can dynamically hide specific columns with an external button click by modifying the columns in the grid instance and then calling the "layoutRefresh" method. This will smoothly refresh the pivot table UI based on modified columns. Please look at the code example below.Code Example    document.getElementById('xxx').addEventListener('click', e =>     {        show2016 = false;        hideColumns(pivotObj.grid.columns);        pivotObj.layoutRefresh();    } );     // Method to hide columns dynamically    function hideColumns(columns, hideColumn) {        for (var i = 0; i < columns.length; i++) {            var isColumnhidden = hideColumn;            if (hideColumn) {                columns[i].visible = false;            }            if (columns[i].headerText == 'FY 2015') {                columns[i].visible = false;                isColumnhidden = true;            }            if (columns[i].headerText == 'FY 2016') {                columns[i].visible = show2016;                isColumnhidden = true;            }            if (columns[i].columns != null && columns[i].columns.length > 0) {                // Here, stacked columns will be hidden if their parent column is hidden.                hideColumns(columns[i].columns, isColumnhidden);            }        }    }Meanwhile, we have modified your sample for your convenience below.Sample : https://stackblitz.com/edit/bsgxef-n5sx5v?file=index.html,index.jsOutput Screenshot:Please let us know if you have any queries.Regards,Rajeshkannah G

Bill Seddon · Answer

Thank you very much for the answer. I will the question

AngelinFaithSheeba PaulvannanRajadurai · Answer

Hi Bill,Thanks for the update. Please
contact us if you have any other queries. We are always happy to
assist you.Regards,Angelin Faith Sheeba.