LIDOR SYSTEMS

Advanced User Interface Controls and Components

Show/Hide Column Header and Footer in Angular Grid

Created: 09 October 2017

In general, the column header and footer in Grid component for Angular are visible. In some cases you may need to hide the footer and in more rare situations, you may need to hide column header and footer. In later case, the grid will appear and act as a list box, showing data in multiple columns.

Grid component is part of IntegralUI Web
a suite of UI Components for development of web apps

If you have any questions, don't hesitate to contact us at support@lidorsystems.com

As the demo shows, by clicking on check boxes in control panel, you can set whether grid header or footer are visible or not.

How to Show/Hide Column Header

Showing or hiding the column header is very easy in IntegralUI Grid component. There is a property called showHeader that determines whether the grid header is visible or not. By default, this property is set to true, which means that the header is visible.

By changing this property value to false in HTML declaration of the Angular Grid component, the header will disappear:

<iui-grid [columns]="columns" [rows]="rows" [showHeader]="false"></iui-grid>
                            

How to Hide Grid Footer

In similar way as above, there is a property called showFooter that determines whether the grid footer is visible or not. By default, this property is also set to true, which means that the footer is visible.

<iui-grid [columns]="columns" [rows]="rows" [showFooter]="false"></iui-grid>
                            

When both of these properties are set to false, and if you set the gridLines property to None, the Grid will appear like a ListBox. Because the ListBox component only shows data in a single column, the Grid may be better to use here. It will allow you to easily present data in more uniform way.

Conclusion

Setting the visibility of column header and footer in IntegralUI Grid component for Angular is straightforward. You only need to change the values of two properties and you can have a grid without header, footer or both.

The Grid component is part of IntegralUI Web.

Did you Like this Article?


Enter your e-mail address below and you will receive latest articles as well as news on upcoming events and special offers.