Hi Team,
I want to hide and unhide a entire row of headers in multi-header column layout in igx-grid. Kindly let me know if there are any possiblities for this. Please find the attached screen shot. In the below screenshot i want to hide/unhide the highlighted(in yellow) headers.
stackblitz - Infragistics Angular Components - StackBlitz
Thanks,
Vijay V
Hello Vijay,
If an igx-column-group is hidden all the columns that belong to that group would be hidden as well, so in order to be able to show or hide it, what I can suggest you is using ngIf and displaying the igx-column-group based on the value of a variable this way the columns and child column groups that belong to the column group would be displayed instead of being hidden.
I have prepared a small sample that demonstrates what I have explained above. You can find it here.
Please test the sample on your side and let me know if you have any questions.
Regards, Ivan Kitanov
Hi,
Thanks for the solution. Can we hide and unhide/collapse and expand a child column header. Kindly let me know.
Can you elaborate more on what do you mean by “unhide/collapse and expand a child column header”? If you need to achieve the same as when the parent column group was hidden but the child columns and child column groups are still shown then you can use the same approach as I suggested in my previous reply.
If you only need to hide the child column groups and you don’t need to display their children, then I recommend you reviewing the Column Hiding topic from our documentation.
Please let me know if you have any questions.
Can we hide/unhide the child column headers in a igx column group without using igx-grid-toolbar-hiding. is it feasible to implement using igx-toggle. I have tried to hide but not able to unhide. Kindly let me know.
Thank you for providing a sample. After reviewing it, what I can say is that hiding the column by using a toggle that displays the excel-style filtering and using its showHiding to hide the column might not be the best approach, since you would be unable to show the column again unless the logic for showing the columns is placed somewhere else.
What I can suggest you is creating a Custom Column Hiding UI, similar to the one from our documentation. In order to not display the column groups there, you would need to set their [disableHiding] property to true. Afterwards for each column group you would like to hide you can implement the approach that uses ngIf to hide/show the column groups with a button or any other element that would fit the needs of your application and place them inside this custom column hiding UI.
If you would like to be able to hide/show the column groups without affecting their children then I recommend you submitting a feature request in our GitHub repository here. Remember when submitting your idea to explain the context in which a feature would be used and why it is needed as well as anything that would prevent you from accomplishing this today. You can even add screenshots to build a stronger case.
This will give you the opportunity to directly communicate with our development team regarding the issue and get notifications whenever new information is available.