Class sap.ui.layout.GridModule: sap/ui/layout/Grid

extends Control

The Grid control is a layout which positions its child controls in a 12 column flow layout. Its 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 pre-defined values.
Since: 1.15.0.
Constructor Summary
new sap.ui.layout.Grid(sId?, mSettings?)Constructor for a new Grid.
Events borrowed from class sap.ui.core.Control
Method Summary
sap.ui.layout.Grid.extend(sClassName, oClassInfo?, FNMetaImpl?)Creates a new subclass of class sap.ui.layout.Grid with name sClassName and enriches it with the information contained in oClassInfo.
sap.ui.layout.Grid.getMetadata()Returns a metadata object for class sap.ui.layout.Grid.
addAriaLabelledBy(vAriaLabelledBy)Adds some ariaLabelledBy into the association ariaLabelledBy.
addContent(oContent)Adds some content to the aggregation content.
destroyContent()Destroys all the content in the aggregation content.
getAriaLabelledBy()Returns array of IDs of the elements which are the current targets of the association ariaLabelledBy.
getContainerQuery()Gets current value of property containerQuery.
getContent()Gets content of aggregation content.
getDefaultIndent()Gets current value of property defaultIndent.
getDefaultSpan()Gets current value of property defaultSpan.
getHSpacing()Gets current value of property hSpacing.
getPosition()Gets current value of property position.
getVSpacing()Gets current value of property vSpacing.
getWidth()Gets current value of property width.
indexOfContent(oContent)Checks for the provided sap.ui.core.Control in the aggregation content.
insertContent(oContent, iIndex)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.
removeAriaLabelledBy(vAriaLabelledBy)Removes an ariaLabelledBy from the association named ariaLabelledBy.
removeContent(vContent)Removes a content from the aggregation content.
setContainerQuery(bContainerQuery)Sets a new value for property containerQuery.
setDefaultIndent(sDefaultIndent)Sets a new value for property defaultIndent.
setDefaultSpan(sDefaultSpan)Sets a new value for property defaultSpan.
setHSpacing(fHSpacing)Sets a new value for property hSpacing.
setPosition(sPosition)Sets a new value for property position.
setVSpacing(fVSpacing)Sets a new value for property vSpacing.
setWidth(sWidth)Sets a new value for property width.
Constructor Detail
new sap.ui.layout.Grid(sId?, mSettings?)

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 for a general description of the syntax of the settings object.

The supported settings are:

  • Properties

  • Aggregations

    • content : sap.ui.core.Control[] (default)

  • Associations

In addition, all settings applicable to the base type sap.ui.core.Control can be used as well.

Parameters:
stringsId?id for the new control, generated automatically if no id is given
objectmSettings?initial settings for the new control
Method Detail
sap.ui.layout.Grid.extend(sClassName, oClassInfo?, FNMetaImpl?): function

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.

Parameters:
stringsClassNameName of the class being created
objectoClassInfo?Object literal with information about the class
functionFNMetaImpl?Constructor function for the metadata object; if not given, it defaults to sap.ui.core.ElementMetadata
Returns:
functionCreated class / constructor function
sap.ui.layout.Grid.getMetadata(): sap.ui.base.Metadata
Returns a metadata object for class sap.ui.layout.Grid.
Returns:
sap.ui.base.MetadataMetadata object describing this class
addAriaLabelledBy(vAriaLabelledBy): sap.ui.layout.Grid
Adds some ariaLabelledBy into the association ariaLabelledBy.
Parameters:
sap.ui.core.ID|sap.ui.core.ControlvAriaLabelledBythe ariaLabelledBy to add; if empty, nothing is inserted
Returns:
sap.ui.layout.GridReference to this in order to allow method chaining
Since:
1.48.7
addContent(oContent): sap.ui.layout.Grid
Adds some content to the aggregation content.
Parameters:
sap.ui.core.ControloContentthe content to add; if empty, nothing is inserted
Returns:
sap.ui.layout.GridReference to this in order to allow method chaining
destroyContent(): sap.ui.layout.Grid
Destroys all the content in the aggregation content.
Returns:
sap.ui.layout.GridReference to this in order to allow method chaining
getAccessibilityInfo()
See:
sap.ui.core.Control#getAccessibilityInfo
getAriaLabelledBy(): sap.ui.core.ID[]
Returns array of IDs of the elements which are the current targets of the association ariaLabelledBy.
Returns:
sap.ui.core.ID[]
Since:
1.48.7
getContainerQuery(): boolean

Gets current value of property containerQuery.

If true then not the media Query ( device screen size), but the size of the container surrounding the grid defines the current range (large, medium or small).

Default value is false.

Returns:
booleanValue of property containerQuery
getContent(): sap.ui.core.Control[]

Gets content of aggregation content.

Controls that are placed into Grid layout.

Returns:
sap.ui.core.Control[]
getDefaultIndent(): sap.ui.layout.GridIndent

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 that the parameters has to be provided in the order large medium small.

Default value is XL0 L0 M0 S0.

Returns:
sap.ui.layout.GridIndentValue of property defaultIndent
getDefaultSpan(): sap.ui.layout.GridSpan

Gets current value of property defaultSpan.

Optional. A string type that represents Grid's default span values for large, medium and small screens for the whole Grid. 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 that the parameters has to be provided in the order large medium small.

Default value is XL3 L3 M6 S12.

Returns:
sap.ui.layout.GridSpanValue of property defaultSpan
getHSpacing(): float

Gets current value of property hSpacing.

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

Default value is 1.

Returns:
floatValue of property hSpacing

Gets current value of property position.

Optional. Position of the Grid in the window or surrounding container. Possible values are "Center", "Left" and "Right".

Default value is Left.

Returns:
sap.ui.layout.GridPositionValue of property position
getVSpacing(): float

Gets current value of property vSpacing.

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

Default value is 1.

Returns:
floatValue of property vSpacing
getWidth(): sap.ui.core.CSSSize

Gets current value of property width.

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

Default value is 100%.

Returns:
sap.ui.core.CSSSizeValue of property width
indexOfContent(oContent): int
Checks for the provided sap.ui.core.Control in the aggregation content. and returns its index if found or -1 otherwise.
Parameters:
sap.ui.core.ControloContentThe content whose index is looked for
Returns:
intThe index of the provided control in the aggregation if found, or -1 otherwise
insertContent(oContent, iIndex): sap.ui.layout.Grid
Inserts a content into the aggregation content.
Parameters:
sap.ui.core.ControloContentthe content to insert; if empty, nothing is inserted
intiIndexthe 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
Returns:
sap.ui.layout.GridReference to this in order to allow method chaining
removeAllAriaLabelledBy(): sap.ui.core.ID[]
Removes all the controls in the association named ariaLabelledBy.
Returns:
sap.ui.core.ID[]An array of the removed elements (might be empty)
Since:
1.48.7
removeAllContent(): sap.ui.core.Control[]

Removes all the controls from the aggregation content.

Additionally, it unregisters them from the hosting UIArea.

Returns:
sap.ui.core.Control[]An array of the removed elements (might be empty)
removeAriaLabelledBy(vAriaLabelledBy): sap.ui.core.ID
Removes an ariaLabelledBy from the association named ariaLabelledBy.
Parameters:
int|sap.ui.core.ID|sap.ui.core.ControlvAriaLabelledByThe ariaLabelledBy to be removed or its index or ID
Returns:
sap.ui.core.IDThe removed ariaLabelledBy or null
Since:
1.48.7
removeContent(vContent): sap.ui.core.Control
Removes a content from the aggregation content.
Parameters:
int|string|sap.ui.core.ControlvContentThe content to remove or its index or id
Returns:
sap.ui.core.ControlThe removed content or null
setContainerQuery(bContainerQuery): sap.ui.layout.Grid

Sets a new value for property containerQuery.

If true then not the media Query ( device screen size), but the size of the container surrounding the grid defines the current range (large, medium or small).

When called with a value of null or undefined, the default value of the property will be restored.

Default value is false.

Parameters:
booleanbContainerQueryNew value for property containerQuery
Returns:
sap.ui.layout.GridReference to this in order to allow method chaining
setDefaultIndent(sDefaultIndent): sap.ui.layout.Grid

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 that the parameters has to be provided in the order large medium small.

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.

Parameters:
sap.ui.layout.GridIndentsDefaultIndentNew value for property defaultIndent
Returns:
sap.ui.layout.GridReference to this in order to allow method chaining
setDefaultSpan(sDefaultSpan): sap.ui.layout.Grid

Sets a new value for property defaultSpan.

Optional. A string type that represents Grid's default span values for large, medium and small screens for the whole Grid. 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 that the parameters has to be provided in the order large medium small.

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.

Parameters:
sap.ui.layout.GridSpansDefaultSpanNew value for property defaultSpan
Returns:
sap.ui.layout.GridReference to this in order to allow method chaining
setHSpacing(fHSpacing): sap.ui.layout.Grid

Sets a new value for property hSpacing.

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

Parameters:
floatfHSpacingNew value for property hSpacing
Returns:
sap.ui.layout.GridReference to this in order to allow method chaining
setPosition(sPosition): sap.ui.layout.Grid

Sets a new value for property position.

Optional. Position of the Grid in the window or surrounding container. Possible values are "Center", "Left" and "Right".

When called with a value of null or undefined, the default value of the property will be restored.

Default value is Left.

Parameters:
sap.ui.layout.GridPositionsPositionNew value for property position
Returns:
sap.ui.layout.GridReference to this in order to allow method chaining
setVSpacing(fVSpacing): sap.ui.layout.Grid

Sets a new value for property vSpacing.

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

Parameters:
floatfVSpacingNew value for property vSpacing
Returns:
sap.ui.layout.GridReference to this in order to allow method chaining
setWidth(sWidth): sap.ui.layout.Grid

Sets a new value for property width.

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

Parameters:
sap.ui.core.CSSSizesWidthNew value for property width
Returns:
sap.ui.layout.GridReference to this in order to allow method chaining