Header
Since the DikeGrid structure definition uses the CSS Grid Layout specification, as a convention, the Header is also called Header Row.
Last updated
Since the DikeGrid structure definition uses the CSS Grid Layout specification, as a convention, the Header is also called Header Row.
Last updated
The Header Row of the DikeGrid is composed of all the column headers.
This initial setup generates the following output:
As you can see, the Header Row occupies the entire horizontal extension of the DikeGrid instance.
The highlighted Header Row represents only one column definition in the CSS Grid Layout specification. Therefore, the DikeGrid CSS Grid Layout will have three template columns when defining columns in all panels of the DikeGrid.
See the Panels' structure for more details.
Inside the Header Row comes the actual column headers definitions. The Header Row uses a nested CSS Grid Layout grid.
By default, the column headers will have a height of 60 pixels. However, you can change this height by providing a numeric value to the input property called headerRowHeight.
You can also change the height of the Header by providing the Injection Token called HEADER_ROW_HEIGHT.
In the previous code snippet, we added the headerRowHeight property to the DikeGrid instance and was bound to the gridProperties object.
Open the Floating Configuration Panel, go to the Header group, and type 120 in the Header Height textbox.
Be aware that the Header Row height will be present in every level when grouping columns. Therefore, the total size of the DikeGrid Header will be the sum of every nested group.
Let us define a group named Complete Name. This group will have two child columns: Name and Surname columns.
For further details about groups, see Column Grouping.
