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
Advanced User Interface Controls and Components
Created: 09 October 2017
Updated: 05 April 2019
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.
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.
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>
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.
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.