ghiscoding / Angular-Slickgrid

Angular-Slickgrid is a wrapper of the lightning fast & customizable SlickGrid datagrid, it also includes multiple Styling Themes
https://ghiscoding.github.io/Angular-Slickgrid
Other
397 stars 120 forks source link

Would like to know the options to hide a row without deleting from grid #517

Closed desuraghu closed 4 years ago

desuraghu commented 4 years ago

General Topic

Would like to know is there any option available to hide a row in the grid (other than filters)

Your Environment

Software Version(s)
Angular 7.2.4
Angular-Slickgrid 2.1711
TypeScript 3.2
Operating System Windows 10
NPM/Node/Yarn NPM

Context or Topic

Hiding a row in the grid based on few parameters available in the row object (item)

Expected Behavior

If the parameters are satisfied, the row should be hidden

Current Behavior

Not sure weather there is any option available to hide a the row. If we try to hide the row by adding CSS style, the row is not visible. But the space is occupied in the grid in that position.

Possible Solution

Need to have an option to hide the row.

ghiscoding commented 4 years ago

These kind of questions should be asked on Stack Overflow.

You can try any of these things

  1. use Grid Presets Wiki to hide certain columns but you will need to know which one(s) to hide before hand since Grid Presets only runs once on grid creation.
  2. you could use grid.setColumns() but that will probably side effect on the grid (especially the header menu, grid menu and column picker), the problem is that Angular-Slickgrid keeps 2 references for all the columns (shown+hidden) & the visible columns for these pickers to work properly and if you use grid.setColumns() yourself then you're bypassing Angular-Slickgrid and the internal references won't be in sync and the list of columns might be wrong in these picker menus.
    • hiding a column by the header menu "hide column" command will call setColumns() but it also updates the 2 references that I just wrote about
  3. you could simply update or reassign the column definition variables, it's a 2 way binding and it will re-render the grid with new column definitions. The side effect is they're not just hidden, they're completely removed from the grid.
  4. you can change the width and/or maxWidth to 1 which will make it look it's hidden but in fact it's just not very wide to show up
    • scroll to the answer of this Stack Overflow question (not the accepted answer but the next few ones where they talk about a width 0 with css or width 1 without).

I guess the number 4. is probably what you're looking for... again this type of question should be asked on Stack Overflow, where I pulled the answer as well.

desuraghu commented 4 years ago

I am looking for an option hide the row, not the column. Will post the same in stack-overflow.

ghiscoding commented 4 years ago

Ahh then I wrote my long answer for the wrong thing, then Filter or Formatters are the only way that I can think of. Filter would be the best but it will probably conflict with the Filters used by Angular-Slickgrid (if you're using any of the Angular-Slickgrid Filters). The Formatters on the other end could hide the values in certain cases but they would have to be added to each and every column definitions and it won't hide the entire row just the data.

On the Filter side, which again is probably the only way to hide a full row, you could try combining your filtering with the single search filter approach (see this Example).

I can't help you more than that, Stack Overflow is again always better for such questions.