Grid

known direct subclasses: FilterBar

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

validateFieldGroup

Events borrowed from class sap.ui.base.ManagedObject

formatError, modelContextChange, parseError, validationError, validationSuccess

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.

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.

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.

Methods borrowed from class sap.ui.core.Control

Methods borrowed from class sap.ui.core.Element

Methods borrowed from class sap.ui.base.ManagedObject

addAggregation, addAssociation, applySettings, attachFormatError, attachModelContextChange, attachParseError, attachValidationError, attachValidationSuccess, bindAggregation, bindContext, bindObject, bindProperty, destroyAggregation, detachFormatError, detachModelContextChange, detachParseError, detachValidationError, detachValidationSuccess, findAggregatedObjects, fireFormatError, fireModelContextChange, fireParseError, fireValidationError, fireValidationSuccess, getAggregation, getAssociation, getBinding, getBindingContext, getBindingInfo, getBindingPath, getEventingParent, getId, getModel, getObjectBinding, getOriginInfo, getParent, getProperty, hasModel, indexOfAggregation, insertAggregation, isBound, isInvalidateSuppressed, isTreeBinding, propagateMessages, removeAggregation, removeAllAggregation, removeAllAssociation, removeAssociation, setAggregation, setAssociation, setBindingContext, setModel, setProperty, unbindAggregation, unbindContext, unbindObject, unbindProperty, validateAggregation, validateProperty

Methods borrowed from class sap.ui.base.EventProvider

attachEvent, attachEventOnce, detachEvent, hasListeners

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
- width : sap.ui.core.CSSSize (default: 100%)
- vSpacing : float (default: 1)
- hSpacing : float (default: 1)
- position : sap.ui.layout.GridPosition (default: Left)
- defaultSpan : sap.ui.layout.GridSpan (default: XL3 L3 M6 S12)
- defaultIndent : sap.ui.layout.GridIndent (default: XL0 L0 M0 S0)
- containerQuery : boolean (default: false)
Aggregations
- content : sap.ui.core.Control[] (default)

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

Parameters:

{string}	sId?	id for the new control, generated automatically if no id is given
{object}	mSettings?	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:

{string}	sClassName	Name of the class being created
{object}	oClassInfo?	Object literal with information about the class
{function}	FNMetaImpl?	Constructor function for the metadata object; if not given, it defaults to `sap.ui.core.ElementMetadata`

Returns:

{function}

Created 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.Metadata}

Metadata object describing this class

addAriaLabelledBy(vAriaLabelledBy): sap.ui.layout.Grid

Adds some ariaLabelledBy into the association ariaLabelledBy.

Parameters:

{string|sap.ui.core.Control}

vAriaLabelledBy

the ariaLabelledBy to add; if empty, nothing is inserted

Since:: 1.38.32

Returns:

{sap.ui.layout.Grid} Reference to this in order to allow method chaining

addContent(oContent): sap.ui.layout.Grid

Adds some content to the aggregation content.

Parameters:

{sap.ui.core.Control}

oContent

the content to add; if empty, nothing is inserted

Returns:

{sap.ui.layout.Grid} Reference 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.Grid} Reference to this in order to allow method chaining

getAccessibilityInfo()

See:

{sap.ui.core.Control#getAccessibilityInfo}

getAriaLabelledBy(): sap.ui.core.Control[]

Returns array of IDs of the elements which are the current targets of the association ariaLabelledBy.

Since:: 1.38.32

Returns:

{sap.ui.core.Control[]}

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:

{boolean} Value 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.GridIndent} Value 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.GridSpan} Value 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:

{float} Value of property hSpacing

getPosition(): sap.ui.layout.GridPosition

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.GridPosition} Value 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:

{float} Value 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.CSSSize} Value 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.Control}

oContent

The content whose index is looked for

Returns:

{int}

The 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.Control}	oContent	the content to insert; if empty, nothing is inserted
{int}	iIndex	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

Returns:

{sap.ui.layout.Grid} Reference to this in order to allow method chaining

removeAllAriaLabelledBy(): sap.ui.core.Control[]

Removes all the controls in the association named ariaLabelledBy.

Since:: 1.38.32

Returns:

{sap.ui.core.Control[]}

An array of the removed elements (might be empty)

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

Removes an ariaLabelledBy from the association named ariaLabelledBy.

Parameters:

{int|string|sap.ui.core.Control}

vAriaLabelledBy

The ariaLabelledByto be removed or its index or ID

Since:: 1.38.32

Returns:

{sap.ui.core.Control} the removed ariaLabelledBy or null

removeContent(vContent): sap.ui.core.Control

Removes a content from the aggregation content.

Parameters:

{int|string|sap.ui.core.Control}

vContent

The contentto remove or its index or id

Returns:

{sap.ui.core.Control} The 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:

{boolean} bContainerQuery New value for property containerQuery

Returns:

{sap.ui.layout.Grid} Reference to this in order to allow method chaining

setDefaultIndent(sDefaultIndent): sap.ui.layout.Grid

Sets a new value for property defaultIndent.

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.GridIndent} sDefaultIndent New value for property defaultIndent

Returns:

{sap.ui.layout.Grid} Reference to this in order to allow method chaining

setDefaultSpan(sDefaultSpan): sap.ui.layout.Grid

Sets a new value for property defaultSpan.

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.GridSpan} sDefaultSpan New value for property defaultSpan

Returns:

{sap.ui.layout.Grid} Reference 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:

{float} fHSpacing New value for property hSpacing

Returns:

{sap.ui.layout.Grid} Reference 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.GridPosition} sPosition New value for property position

Returns:

{sap.ui.layout.Grid} Reference 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:

{float} fVSpacing New value for property vSpacing

Returns:

{sap.ui.layout.Grid} Reference 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.CSSSize} sWidth New value for property width

Returns:

{sap.ui.layout.Grid} Reference to this in order to allow method chaining