Skip to content

TWebResponsiveGridPanel

Description

Below is a list of the most important properties methods and events for TWebResponsiveGridPanel. TWebResponsiveGridPanel is grid panel with responsive behavior. This means that the layout of the grid panel can adapt to the form factor of the web page where it is used. This layout is controlled by the Layout collection. Like a regular grid panel, controls can be dropped on the TWebResponsiveGridPanel and these controls are organized in a grid like structure and represented and accessible via the TWebResponsiveGridPanel.ControlCollection.

Designtime Runtime

HTML template tag

The HTML tag the component can be associated with in an HTML template. Assign the ID attribute with a unique value and set the identical value to the ElementID property. Detailed information can be found in the Use of HTML templates topic.

HTML tag <DIV ID=”UniqueID”></DIV>
ElementID UniqueID

Properties for TWebResponsiveGridPanel

Property Description
ControlCollection Collection of child controls of the TWebResponsiveGridPanel
ElementClassName Optionally sets the CSS classname for the label when styling via CSS is used
ElementID Optionally sets the HTML element ID for a HTML element in the form HTML file the label needs to be connected with. When connected, no new label is created but the Delphi class is connected with the existing HTML element in the form HTML file
Layout Collection of layout settings for various form factors. When a TWebResponsiveGridPanel is dropped on the form 4 layouts are automatically added for 4 different form factors: Smartphone with one column (screen width <= 575pixels), Tablet with two columns (screen width <= 768pixels), Desktop with three columns (screen width <= 991pixels), Large Desktop with four columns (screen width <= 1199pixels).

Methods for TWebResponsiveGridPanel

Property Description
AddControl Adds a new control to the TWebResponsiveGridPanel.
RemoveControl Removes a new control from the TWebResponsiveGridPanel.

Events for TWebResponsiveGridPanel

Property Description
OnLayoutChange Event triggered when the form size changes and causes a new layout to be selected

TResponsiveLayoutItem is the class used in the Layout collection of the TWebResponsiveGridPanel to manage different desired layout settings per screen width.

Properties for TResponsiveLayoutItem

Property Description
ColumnGap Gets or sets the column gap in pixels (px) or percentage (%) for the layout. The column gap is the gap between two successive columns.
Description Text property that can be used to describe the layout. The Description property is not used at runtime in the control.
Margins Sets the margins of the responsive grid cells in the selected layout.
RowGap Gets or sets the column gap in pixels (px) or percentage (%) for the layout. The row gap is the gap between two successive rows.
Style Sets the grid cell style. This is a space delimited string that sets for each row (or column) the specifier for each column in the row. The specifier per column (or row) can be based on fractions (fr), pixels (px) or percentage (%). For example, for a grid with 3 equally divided column widths, the style could be set to '1fr 1fr 1fr'. For a combination of a fixed column width in pixels of 200 pixels and two columns where the 2nd column has the double width of the third, the style could be set to '200px 2fr 1fr'.
StyleType Sets the grid cells responsive style to be based on columns (gTemplateColumns) or rows (gTemplateRows).
Tag Integer property.
Width Sets the control width in pixels under which the layout is chosen.