1

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
hari
  • 47
  • 2

2 Answers2

1

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.

ghiscoding
  • 12,308
  • 6
  • 69
  • 112
  • I have try this preset function, taking a columndefinitions ID and using this ID inside the column in presets function. But its not working and also i have tried another method using width and this class "headerCssClass: 'customHeaderClass'" inside the preset columns. But is not working – hari Apr 18 '22 at 05:05
  • you seem to have misunderstood, you have to remove the column from the array (not include it). This strategy always works, it it doesn't then there is something wrong in your code – ghiscoding Apr 19 '22 at 13:33
0

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.

Manish Patidar
  • 526
  • 4
  • 14