class sap.ui.layout.Grid

Control sample: sap.ui.layout.Grid
Visiblity: public
UX Guidelines: Grid
Implements:
Available since: N/A
Module: sap/ui/layout/Grid
Application Component: CA-UI5-CTR

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:



Documentation links:


Constructor

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


Properties

Name Type Default Value Description
containerQuery boolean false

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).

Visibility: public
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, L2 M4 S6, M11, s10 or l4 m4.

Note: The parameters must be provided in the order .

Visibility: public
defaultSpan sap.ui.layout.GridSpan XL3 L3 M6 S12

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 .

Visibility: public
hSpacing float 1

Optional. Defines the horizontal spacing between the content in the Grid. In rem, allowed values are 0, 0.5 , 1 or 2.

Visibility: public
position sap.ui.layout.GridPosition Left

Optional. Defines the position of the Grid in the window or surrounding container.

Visibility: public
vSpacing float 1

Optional. Defines the vertical spacing between the rows in the Grid. In rem, allowed values are 0, 0.5, 1 and 2.

Visibility: public
width sap.ui.core.CSSSize 100%

Optional. Defines the width of the Grid. If not specified, then 100%.

Visibility: public

Aggregations

Default Aggregation: content

Name Cardinality Type Description
content (default) 0..n sap.ui.core.Control

Controls that are placed into Grid layout.


Associations

Name Cardinality Type Description
ariaLabelledBy 0..n sap.ui.core.Control

Association to controls / IDs that label this control (see WAI-ARIA attribute aria-labelledby).

Since: 1.48.7.


Methods Overview

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 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.

getAccessibilityInfo

Returns the Grid accessibility information.

References:

  • sap.ui.core.Control#getAccessibilityInfo

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 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.

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, L2 M4 S6, M11, s10 or l4 m4.

Note: The parameters must be provided in the order .

Default value is "XL0 L0 M0 S0".

getDefaultSpan

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".

getHSpacing

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.

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 Grid in the window or surrounding container.

Default value is "Left".

getVSpacing

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.

getWidth

Gets current value of property width.

Optional. Defines the width of the Grid. If not specified, then 100%.

Default value is '100%'.

indexOfContent

Checks for the provided sap.ui.core.Control in the aggregation content. and returns its index if found or -1 otherwise.

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 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.

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, 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".

setDefaultSpan

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".

setHSpacing

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.

setPosition

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".

setVSpacing

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.

setWidth

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%'.

addAriaLabelledBy

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

addContent

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

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 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

getAccessibilityInfo

Returns the Grid accessibility information.

References:

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 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.

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, L2 M4 S6, M11, s10 or l4 m4.

Note: The parameters must be provided in the order .

Default value is "XL0 L0 M0 S0".

getDefaultSpan

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".

getHSpacing

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.

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 Grid in the window or surrounding container.

Default value is "Left".

getVSpacing

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.

getWidth

Gets current value of property width.

Optional. Defines the width of the Grid. If not specified, then 100%.

Default value is '100%'.

indexOfContent

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

insertContent

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 0-based index the content should be inserted at; for a negative value of iIndex, the content is inserted at position 0; for a value greater than the current size of the aggregation, the content is inserted at the last position

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.

Param Type DefaultValue Description
vAriaLabelledBy int sap.ui.core.ID sap.ui.core.Control

The ariaLabelledBy to be removed or its index or ID

removeContent

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

setContainerQuery

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 containerQuery

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, 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 defaultIndent

setDefaultSpan

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 defaultSpan

setHSpacing

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 hSpacing

setPosition

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 position

setVSpacing

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 vSpacing

setWidth

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 width