GridContainer
SAP SE
A layout container control used for aligning items with various sizes in a simple grid.
<h3>Overview</h3>
The control is used to align tiles, cards and other controls in configuration, such as a home page or a dashboard.
It represents a grid layout with specific row and column sizes, in which the items can take any number of rows and columns.
The number of columns and rows each item takes can be configured with the use of the <code>{@link sap.f.GridContainerItemLayoutData}</code>.
All rows have the same height and all columns have the same width. Their sizes can be configured with the use of the <code>layout</code> aggregation and <code>{@link sap.f.GridContainerSettings}</code>.
<h3>Usage</h3>
<i>When to use</i>
<ul>
<li>For aligning home page and dashboard items like Tiles and Cards in a simple grid system with equally sized rows and columns.</li>
</ul>
<i>When not to use</i>
<ul>
<li>If a more complex layout grid system, where columns and rows may vary in size, is needed.</li>
</ul>
<h3>Example:</h3>
<pre>
<f:GridContainer>
<f:layout>
<f:GridContainerSettings rowSize="5rem" columnSize="5rem" gap="1rem" />
</f:layout>
<f:layoutS>
<f:GridContainerSettings rowSize="4rem" columnSize="4rem" gap="0.5rem" />
</f:layoutS>
<f:items>
<GenericTile header="Sales Fulfillment">
<layoutData>
<f:GridContainerItemLayoutData rows="2" columns="2" />
</layoutData>
</GenericTile>
<w:Card manifest="url-to-manifest">
<w:layoutData>
<f:GridContainerItemLayoutData rows="6" columns="3" />
</w:layoutData>
</w:Card>
<Panel>
<layoutData>
<f:GridContainerItemLayoutData columns="4" />
</layoutData>
<Text text="Sales information" />
</Panel>
</f:items>
</f:GridContainer>
</pre>
<h3>Drag and drop:</h3>
Drag and drop is enabled for the <code>GridContainer</code> with enhanced visualization and interaction, better suited for grid items. This is configured by using the <code>{@link sap.f.dnd.GridDropInfo}</code>.
Similar to the <code>{@link sap.ui.core.dnd.DropInfo}</code>, <code>{@link sap.f.dnd.GridDropInfo}</code> has to be added to the <code>dragDropConfig</code> aggregation, by using <code>{@link sap.ui.core.Element#addDragDropConfig}</code>.
Both <code>{@link sap.ui.core.dnd.DropInfo}</code> and <code>{@link sap.f.dnd.GridDropInfo}</code> can be used to configure drag and drop.
The difference is that the <code>{@link sap.f.dnd.GridDropInfo}</code> will provide a drop indicator, which mimics the size of the dragged item and shows the potential drop position inside the grid.
1.65
sap.ui.core/Control
Defines the width of the control.
If set to <code>true</code> the current range (large, medium or small) is defined by the size of the
container surrounding the <code>GridContainer</code>, instead of the device screen size (media Query).
Should the items stretch to fill the rows that they occupy, or not.
If set to <code>true</code> the items will stretch.
Increases the density when arranging the items. Smaller items will take up all of the available space, ignoring their order.
<b>Note:</b> The order of the items is ignored. An item which is normally at the bottom, can appear on top.
Disclaimer: this property is in a beta state - incompatible API changes may be done before its official public release. Use at your own discretion.
Makes the grid items act like an inline-block elements. They will be arranged in rows with height equal to the highest item in the row.
<b>Note:</b> If set to <code>true</code> the properties <code>rowSize</code> for grid layout, and <code>minRows</code> and <code>rows</code> per item will be ignored.
<b>Note:</b> Not supported in IE11, Edge 15.
Disclaimer: this property is in a beta state - incompatible API changes may be done before its official public release. Use at your own discretion.
Fired when the currently active GridSettings change.
The name of the newly active layout.
The items contained by the control.
The sap.f.GridContainerSettings applied if no settings are provided for a specific size.
If no layout is given, a default layout will be used. See the default values for <code>sap.f.GridContainerSettings</code>.
<b>Note:</b> It is not possible to reuse the same instance of <code>GridContainerSettings</code> for several layouts. New instance has to be created for each of them. This is caused by the fact that one object can exist in only a single aggregation.
The sap.f.GridContainerSettings applied for size "XS". Range: up to 374px.
Disclaimer: this property is in a beta state - incompatible API changes may be done before its official public release. Use at your own discretion.
The sap.f.GridContainerSettings applied for size "S". Range: 375px - 599px.
The sap.f.GridContainerSettings applied for size "M". Range: 600px - 1023px.
The sap.f.GridContainerSettings applied for size "L". Range: 1023px - 1439px.
The sap.f.GridContainerSettings applied for size "XL". Range: from 1440px.
Default sap.f.GridContainerSettings