How to hide and show a column in Angular Slickgrid-CodePudding

Based on some condition I need to hide a column in slickgrid depends upon the user criteria and after user required, We need to visible the column in a slickgrid. So initially i have to hide a column by using hideColumnId, In this hideColumnId variable is give which column we need to hide, I have to get the ID from hideColumnId, In this hideColumnId called in a service file for use of hide and visible the column along with i have send the parentpage context to service file for processing. So, I have try this way to hide a column in slickgrid, But hidden column is not happen in the slickgrid. I have shared code snippet in below.

I dont know the reason why hidden is not working in slickgrid. So kindly provide a proper solution for my issue

if (hiddenColumnId){
     parentPageContext.angularGrid.gridService.hideColumnById(hiddenColumnId)
}

Same like a hidden columns I need to visible the columns. There is any way to achieve this visible a column in the slickgrid.

Software Version:

angular: 11.2.18
angular-slickgrid: 2.30.4
Operating System : Windows 10
Typescript : 4.0.8
node: 14.18.3

CodePudding user response：

Please note that I'm the author of Angular-Slickgrid

You're probably having a racing condition, the grid needs 1 cycle to render in Angular, so if you called this method at the grid creation then it won't work, you can add a setTimeout of 0 or 1 and that will probably help.

However I'm not sure what you're trying to do exactly but I don't recommend using the hideColumnById unless you want to hide a column at a later time (for example via a button), if on the other hand you're just trying to hide some column(s) when the grid gets loaded then you should use something else.

That something else is most often the Grid State & Grid Presets and for your use case that would be presets and the way it works is that only the columns defined in the columns array of the grid options presets will show up in the grid, in other words whatever is omitted from that array will be hidden (but still be created and still available to later show it) and that seem to be exactly what you are trying to do.

For example, let say that I have 3 columns named: id, firstName and lastName and I defined my presets with only 2 of the 3 (firstName and lastName), then id will be hidden but still available from the Column Picker and/or Grid Menu to show it later whenever I want to show it.

this.columnDefinitions = [
  { id: 'id', name: 'id', field: 'id' },
  { id: 'firstName', name: 'First Name', field: 'firstName' },
  { id: 'lastName', name: 'Last Name', field: 'lastName' },
];

this.gridOptions = {
      // ... other options

      presets: {
        // the column position in the array is very important and represent
        // the position that will show in the grid
        // if a column is omitted from the array, it will be hidden from grid
        columns: [
          { columnId: 'firstName' },
          { columnId: 'lastName' }
        ],
      }
    };

I often do this to hide the id in some Admin reports but still make it available in the grid if I need to find its UID in the database.

CodePudding user response：

Using CSS you can achieve the functionality, but there is no default configuration available for it within the package.

you can see this answer for your reference.