TDashboardCanvas
Dashboard card canvas container using CSS Grid. Displays TCard components in a responsive grid layout with automatic mobile stacking.
DashboardCSS GridResponsive
Overview
TDashboardCanvas manages a collection of dashboard cards using CSS Grid layout. It handles card creation from datasets, embedding forms into cards, and responsive behaviour.
Key Published Properties
| Property | Type | Description |
|---|---|---|
| ActiveDashboard | TDashboard | The dashboard data model containing card definitions. |
| LayoutDataSet | TAPIDataSet | Dataset containing card layout information. |
| FormManager | TFormManager | Manages form embedding into cards. |
| SpanAcross | Integer | Default number of grid columns (default: 3). |
| SpanDown | Integer | Default number of grid rows (default: 3). |
| DashboardMode | TDashboardMode | mdDisplay (normal) or mdLayout (editing). |
| HeaderStyle | THeaderStyle | Style for card headers. |
Key Methods
FUNCTION LoadCards: Integer;
Loads cards from LayoutDataSet and renders them. Returns number of cards created.
FUNCTION RenderDashboard: Integer;
Renders all cards in the CSS Grid layout.
PROCEDURE ClearCanvas;
Removes all cards from the canvas.
PROCEDURE EmbedFormInCard(CardNumber: Integer; FormName, Title, SubTitle: STRING; TileId: Integer);
Embeds a form into a specific card by card number.
Responsive Behaviour
TDashboardCanvas uses TDom for viewport tracking:
- Desktop (≥1024px): Full grid layout with SpanAcross columns
- Tablet (768-1023px): 2 columns
- Mobile (<768px): Single column, cards stack vertically
IThemeSubscriber
TDashboardCanvas implements IThemeSubscriber and receives theme updates to style the grid background and borders.