Skip to content

Header

This is a section bar control to add a header bar to a compound or container control.

Header Properties

Property Type Required Default
Caption string Optional
DataTable object Optional
Grid object Optional
UseTopPadding boolean Optional true
_Name string Optional

Caption

Text label for the caption content.

Can't co-exist with Grid.

  • type: string

DataTable

Can't co-exist with Caption.

  • type: object with following properties.
Property Type Required Default
Items array Required
Layout DataTableLayout Optional

Items

Array of header Columns that represent columns in a data Table header.

All array items must be of the type:

Layout

The layout of columns in a Data Table row.


Grid

Can't co-exist with Caption.

  • type: object with following properties.
Property Type Required Default
Items array Required
Layout GridRowLayout Optional

Items

Array of GridRowItem that represent columns in the grid header.

RowItems with Image not supported in the header at this time.

All array items must be of the type:

Layout

The layout of columns in a Grid Table row.

By default use the same layout as for the section rows.


UseTopPadding

For iOS devices, this property shows or hides the top padding of the section header (gray separator).

For Android devices, this property is not applicable, as there is no gray separator at the top of the header.

  • type: boolean
  • default: true

_Name

  • type: string

Examples

Simple Caption Header - No Top Padding

{
  "Header": {
    "Caption": "A Section Caption - No Top Padding",
    "UseTopPadding": false
  }
}

Grid Header

{
  "Header": {
    "Grid": {
      "Items": [
        {
          "Text": ""
        },
        {
          "Text": "ID"
        },
        {
          "Text": "Description"
        },
        {
          "Text": "Price",
          "TextAlignment": "right"
        }
      ],
      "Layout": {
        "ColumnWidthPercentage": [
          0.2,
          0.2,
          -1,
          0.25
        ]
      }
    }
  }
}