Author Topic: Hidden column based on ui cellData value  (Read 2104 times)

fmusignac

  • Pro Ultimate
  • Newbie
  • *
  • Posts: 11
    • View Profile
Hidden column based on ui cellData value
« on: March 21, 2017, 11:38:36 pm »
I am trying to hide a column based on the values of its rows. If the value is null for any row, then I need to hide the whole column.

I tried attaching a function to the hidden property of the column in the colModel, but that didn't seem to trigger. Can I hide the column based on a function on the render property?

Something like:

.colModel = [...
{... render: function (ui) { ui.cellData == null ? hidden = true: hidden = false }; }, ...

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6263
    • View Profile
Re: Hidden column based on ui cellData value
« Reply #1 on: March 22, 2017, 10:33:43 am »
This is the code required to hide a column.

Code: [Select]
column.hidden = true;
grid.refreshCM();
grid.refresh();

Conditionally hiding a column in column.render callback is possible but it may look weird to the user, I mean the user is scrolling the view ( assuming virtual mode) and all of a sudden the column would get hidden.

column could be hidden before rendering of the grid when data is available.

var hidden;
grid.option('dataModel.data').forEach(function(rd){
  if ( rd[dataIndx ] === null ){
    hidden = true;
  }
});

if ( hidden ){
  column.hidden = hidden;
  grid.refreshCM();
}