A layout control which positions its child controls in a 12 column flow layout.
The Grid
control's children can be specified to take on a variable amount of columns depending on available screen size. With this control it is possible to achieve flexible layouts and line-breaks for extra large-, large-, medium- and small-sized screens, such as large desktop, desktop, tablet, and mobile.
The Grid
control's width can be percentage- or pixel-based and the spacing between its columns can be set to various predefined values.
Notes:
sapUiRespGridOverflowHidden
CSS class should be added to the control in order to hide the overflowing part of it.Constructor for a new Grid
.
Accepts an object literal mSettings
that defines initial property values, aggregated and associated objects as well as event handlers. See sap.ui.base.ManagedObject#constructor for a general description of the syntax of the settings object.
new sap.ui.layout.Grid(sId?, mSettings?)
Param | Type | Default Value | Description |
---|---|---|---|
sId? | string | ID for the new control, generated automatically if no ID is given |
|
mSettings? | object | Initial settings for the new control |
Name | Type | Default Value | Description |
---|---|---|---|
containerQuery | boolean | false | If set to |
defaultIndent | sap.ui.layout.GridIndent | XL0 L0 M0 S0 | Optional. Defines default for the whole Grid numbers of empty columns before the current span begins. It can be defined for large, medium and small screens. Allowed values are separated by space Letters L, M or S followed by number of columns from 0 to 11 that the container has to take, for example, Note: The parameters must be provided in the order |
defaultSpan | sap.ui.layout.GridSpan | XL3 L3 M6 S12 | Optional. A string type that represents the span values of the Note: The parameters must be provided in the order |
hSpacing | float | 1 | Optional. Defines the horizontal spacing between the content in the |
position | sap.ui.layout.GridPosition | Left | Optional. Defines the position of the |
vSpacing | float | 1 | Optional. Defines the vertical spacing between the rows in the |
width | sap.ui.core.CSSSize | 100% | Optional. Defines the width of the |
Default Aggregation: content
Name | Cardinality | Type | Description |
---|---|---|---|
content (default) | 0..n | sap.ui.core.Control |
Controls that are placed into Grid layout. |
Name | Cardinality | Type | Description |
---|---|---|---|
ariaLabelledBy | 0..n | sap.ui.core.Control |
Association to controls / IDs that label this control (see WAI-ARIA attribute |
Method | Description |
---|---|
addAriaLabelledBy |
Adds some ariaLabelledBy into the association ariaLabelledBy. |
addContent |
Adds some content to the aggregation content. |
destroyContent |
Destroys all the content in the aggregation content. |
sap.ui.layout.Grid.extend |
Creates a new subclass of class sap.ui.layout.Grid with name
|
getAccessibilityInfo |
Returns the
|
getAriaLabelledBy |
Returns array of IDs of the elements which are the current targets of the association ariaLabelledBy. |
getContainerQuery |
Gets current value of property containerQuery. If set to Default value is |
getContent |
Gets content of aggregation content. Controls that are placed into Grid layout. |
getDefaultIndent |
Gets current value of property defaultIndent. Optional. Defines default for the whole Grid numbers of empty columns before the current span begins. It can be defined for large, medium and small screens. Allowed values are separated by space Letters L, M or S followed by number of columns from 0 to 11 that the container has to take, for example, Note: The parameters must be provided in the order Default value is |
getDefaultSpan |
Gets current value of property defaultSpan. Optional. A string type that represents the span values of the Note: The parameters must be provided in the order Default value is |
getHSpacing |
Gets current value of property hSpacing. Optional. Defines the horizontal spacing between the content in the Default value is |
sap.ui.layout.Grid.getMetadata |
Returns a metadata object for class sap.ui.layout.Grid. |
getPosition |
Gets current value of property position. Optional. Defines the position of the Default value is |
getVSpacing |
Gets current value of property vSpacing. Optional. Defines the vertical spacing between the rows in the Default value is |
getWidth |
Gets current value of property width. Optional. Defines the width of the Default value is |
indexOfContent |
Checks for the provided |
insertContent |
Inserts a content into the aggregation content. |
removeAllAriaLabelledBy |
Removes all the controls in the association named ariaLabelledBy. |
removeAllContent |
Removes all the controls from the aggregation content. Additionally, it unregisters them from the hosting UIArea. |
removeAriaLabelledBy |
Removes an ariaLabelledBy from the association named ariaLabelledBy. |
removeContent |
Removes a content from the aggregation content. |
setContainerQuery |
Sets a new value for property containerQuery. If set to When called with a value of Default value is |
setDefaultIndent |
Sets a new value for property defaultIndent. Optional. Defines default for the whole Grid numbers of empty columns before the current span begins. It can be defined for large, medium and small screens. Allowed values are separated by space Letters L, M or S followed by number of columns from 0 to 11 that the container has to take, for example, Note: The parameters must be provided in the order When called with a value of Default value is |
setDefaultSpan |
Sets a new value for property defaultSpan. Optional. A string type that represents the span values of the Note: The parameters must be provided in the order When called with a value of Default value is |
setHSpacing |
Sets a new value for property hSpacing. Optional. Defines the horizontal spacing between the content in the When called with a value of Default value is |
setPosition |
Sets a new value for property position. Optional. Defines the position of the When called with a value of Default value is |
setVSpacing |
Sets a new value for property vSpacing. Optional. Defines the vertical spacing between the rows in the When called with a value of Default value is |
setWidth |
Sets a new value for property width. Optional. Defines the width of the When called with a value of Default value is |
Adds some ariaLabelledBy into the association ariaLabelledBy.
Param | Type | DefaultValue | Description |
---|---|---|---|
vAriaLabelledBy | sap.ui.core.ID sap.ui.core.Control |
The ariaLabelledBy to add; if empty, nothing is inserted |
Adds some content to the aggregation content.
Param | Type | DefaultValue | Description |
---|---|---|---|
oContent | sap.ui.core.Control |
The content to add; if empty, nothing is inserted |
Creates a new subclass of class sap.ui.layout.Grid with name sClassName
and enriches it with the information contained in oClassInfo
.
oClassInfo
might contain the same kind of information as described in sap.ui.core.Control.extend.
Param | Type | DefaultValue | Description |
---|---|---|---|
sClassName | string |
Name of the class being created |
|
oClassInfo | object |
Object literal with information about the class |
|
FNMetaImpl | function |
Constructor function for the metadata object; if not given, it defaults to the metadata implementation used by this class |
Returns the Grid
accessibility information.
References:
Returns array of IDs of the elements which are the current targets of the association ariaLabelledBy.
Gets current value of property containerQuery.
If set to true
, the current range (large, medium or small) is defined by the size of the container surrounding the Grid
instead of the device screen size (media Query).
Default value is false
.
Gets current value of property defaultIndent.
Optional. Defines default for the whole Grid numbers of empty columns before the current span begins. It can be defined for large, medium and small screens. Allowed values are separated by space Letters L, M or S followed by number of columns from 0 to 11 that the container has to take, for example, L2 M4 S6
, M11
, s10
or l4 m4
.
Note: The parameters must be provided in the order
Default value is "XL0 L0 M0 S0"
.
Gets current value of property defaultSpan.
Optional. A string type that represents the span values of the Grid
for large, medium and small screens. Allowed values are separated by space Letters L, M or S followed by number of columns from 1 to 12 that the container has to take, for example, L2 M4 S6
, M12
, s10
or l4 m4
.
Note: The parameters must be provided in the order
Default value is "XL3 L3 M6 S12"
.
Gets current value of property hSpacing.
Optional. Defines the horizontal spacing between the content in the Grid
. In rem, allowed values are 0, 0.5 , 1 or 2.
Default value is 1
.
Gets current value of property position.
Optional. Defines the position of the Grid
in the window or surrounding container.
Default value is "Left"
.
Gets current value of property vSpacing.
Optional. Defines the vertical spacing between the rows in the Grid
. In rem, allowed values are 0, 0.5, 1 and 2.
Default value is 1
.
Gets current value of property width.
Optional. Defines the width of the Grid
. If not specified, then 100%.
Default value is '100%'
.
Checks for the provided sap.ui.core.Control
in the aggregation content. and returns its index if found or -1 otherwise.
Param | Type | DefaultValue | Description |
---|---|---|---|
oContent | sap.ui.core.Control |
The content whose index is looked for |
Inserts a content into the aggregation content.
Param | Type | DefaultValue | Description |
---|---|---|---|
oContent | sap.ui.core.Control |
The content to insert; if empty, nothing is inserted |
|
iIndex | int |
The |
Removes all the controls from the aggregation content.
Additionally, it unregisters them from the hosting UIArea.
Removes an ariaLabelledBy from the association named ariaLabelledBy.
Param | Type | DefaultValue | Description |
---|---|---|---|
vAriaLabelledBy | int sap.ui.core.ID sap.ui.core.Control |
The ariaLabelledBy to be removed or its index or ID |
Removes a content from the aggregation content.
Param | Type | DefaultValue | Description |
---|---|---|---|
vContent | int string sap.ui.core.Control |
The content to remove or its index or id |
Sets a new value for property containerQuery.
If set to true
, the current range (large, medium or small) is defined by the size of the container surrounding the Grid
instead of the device screen size (media Query).
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is false
.
Param | Type | DefaultValue | Description |
---|---|---|---|
bContainerQuery | boolean | false |
New value for property |
Sets a new value for property defaultIndent.
Optional. Defines default for the whole Grid numbers of empty columns before the current span begins. It can be defined for large, medium and small screens. Allowed values are separated by space Letters L, M or S followed by number of columns from 0 to 11 that the container has to take, for example, L2 M4 S6
, M11
, s10
or l4 m4
.
Note: The parameters must be provided in the order
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is "XL0 L0 M0 S0"
.
Param | Type | DefaultValue | Description |
---|---|---|---|
sDefaultIndent | sap.ui.layout.GridIndent | "XL0 L0 M0 S0" |
New value for property |
Sets a new value for property defaultSpan.
Optional. A string type that represents the span values of the Grid
for large, medium and small screens. Allowed values are separated by space Letters L, M or S followed by number of columns from 1 to 12 that the container has to take, for example, L2 M4 S6
, M12
, s10
or l4 m4
.
Note: The parameters must be provided in the order
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is "XL3 L3 M6 S12"
.
Param | Type | DefaultValue | Description |
---|---|---|---|
sDefaultSpan | sap.ui.layout.GridSpan | "XL3 L3 M6 S12" |
New value for property |
Sets a new value for property hSpacing.
Optional. Defines the horizontal spacing between the content in the Grid
. In rem, allowed values are 0, 0.5 , 1 or 2.
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is 1
.
Param | Type | DefaultValue | Description |
---|---|---|---|
fHSpacing | float | 1 |
New value for property |
Sets a new value for property position.
Optional. Defines the position of the Grid
in the window or surrounding container.
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is "Left"
.
Param | Type | DefaultValue | Description |
---|---|---|---|
sPosition | sap.ui.layout.GridPosition | "Left" |
New value for property |
Sets a new value for property vSpacing.
Optional. Defines the vertical spacing between the rows in the Grid
. In rem, allowed values are 0, 0.5, 1 and 2.
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is 1
.
Param | Type | DefaultValue | Description |
---|---|---|---|
fVSpacing | float | 1 |
New value for property |
Sets a new value for property width.
Optional. Defines the width of the Grid
. If not specified, then 100%.
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is '100%'
.
Param | Type | DefaultValue | Description |
---|---|---|---|
sWidth | sap.ui.core.CSSSize | '100%' |
New value for property |