Show TOC

GridDataLocate this document in the navigation structure

The GridData provides the layout data for a UI element in a container to which GridLayout is assigned. A grid layout defines a number of cells. In a grid layout cell, you can align a UI element both horizontally (left-justified, horizontally centered, right-justified, and so on) and vertically (top-aligned, vertically centered, bottom-aligned, and so on). The default setting for the alignment of the UI elements within the GridLayouts is left-justified and top-aligned.

Padding can be specified in two ways:

  • In the GridLayout using GridLayout.cellPadding
  • In the GridData using GridLayout.paddingLeft, or GridLayout.paddingRight, etc.

Both ways are possible. If you set the padding on the GridLayout, padding is set evenly on each cell, as shown in the figure in GridLayout Properties.

You can also specify padding on each cell. Paddings specified on GridLayouts and GridData are added up.

Runtime Class

CL_WD_GRID_DATA

Properties in View Designer

Name Type Initial Value Bindable

id

STRING

(automatic)

No

cellBackgroundDesign

WDUI_CELL_BG_DESIGN

transparent

Yes

colSpan

I

1

No

dragData

STRING

No

height

STRING

No

hAlign

WDUI_CELL_HALIGN

beginOfLine

No

paddingBottom

STRING

No

paddingLeft

STRING

No

paddingRight

STRING

No

paddingTop

STRING

No

semanticColor WDUI_TABLE_CELL_DESIGN standard Yes

vAlign

WDUI_CELL_VALIGN

baseline

No

width

STRING

No

Note

Other properties that can be inherited are defined in the related higher-level classes. The related UI elements are:

Dynamic Programming

For dynamic programming, the same properties, events, and aggregations as in the View Designer are available. But note that the spelling format and use of upper/lower case is different.

Dynamic Programming of Properties

View Designer Name Runtime Name Type

cellBackgroundDesign

CELL_BACKGROUND_DESIGN

WDUI_CELL_BG_DESIGN

 cellBackgroundDesign: border

CL_WD_GRID_DATA=>E_CELL_BACKGROUND_DESIGN-BORDER

 cellBackgroundDesign: fill1

CL_WD_GRID_DATA=>E_CELL_BACKGROUND_DESIGN-FILL1

 cellBackgroundDesign: fill2

CL_WD_GRID_DATA=>E_CELL_BACKGROUND_DESIGN-FILL2

 cellBackgroundDesign: fill3

CL_WD_GRID_DATA=>E_CELL_BACKGROUND_DESIGN-FILL3

 cellBackgroundDesign: header

CL_WD_GRID_DATA=>E_CELL_BACKGROUND_DESIGN-HEADER

 cellBackgroundDesign: plain

CL_WD_GRID_DATA=>E_CELL_BACKGROUND_DESIGN-PLAIN

 cellBackgroundDesign: transparent

CL_WD_GRID_DATA=>E_CELL_BACKGROUND_DESIGN-TRANSPARENT

colSpan

COL_SPAN

I

dragData

DRAG_DATA

STRING

height

HEIGHT

STRING

hAlign

H_ALIGN

WDUI_CELL_HALIGN

 hAlign: beginOfLine

CL_WD_GRID_DATA=>E_H_ALIGN-BEGIN_OF_LINE

 hAlign: center

CL_WD_GRID_DATA=>E_H_ALIGN-CENTER

 hAlign: char

CL_WD_GRID_DATA=>E_H_ALIGN-CHAR

 hAlign: endOfLine

CL_WD_GRID_DATA=>E_H_ALIGN-END_OF_LINE

 hAlign: forcedLeft

CL_WD_GRID_DATA=>E_H_ALIGN-FORCED_LEFT

 hAlign: forcedRight

CL_WD_GRID_DATA=>E_H_ALIGN-FORCED_RIGHT

 hAlign: justify

CL_WD_GRID_DATA=>E_H_ALIGN-JUSTIFY

paddingBottom

PADDING_BOTTOM

STRING

paddingLeft

PADDING_LEFT

STRING

paddingRight

PADDING_RIGHT

STRING

paddingTop

PADDING_TOP

STRING

semanticColor

SEMANTIC_COLOR WDUI_TABLE_CELL_DESIGN
semanticColor: alternating CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-ALTERNATING
semanticColor: badvalue_dark CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-BADVALUE_DARK
semanticColor: badvalue_light CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-BADVALUE_LIGHT
semanticColor: badvalue_medium CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-BADVALUE_MEDIUM
semanticColor: calendarAqua CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-CALENDAR_AQUA
semanticColor: calendarBlue CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-CALENDAR_BLUE
semanticColor: calendarBrown CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-CALENDAR_BROWN
semanticColor: calendarGreen CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-CALENDAR_GREEN
semanticColor: calendarMetal CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-CALENDAR_METAL
semanticColor: calendarPeach CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-CALENDAR_PEACH
semanticColor: calendarPurple CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-CALENDAR_PURPLE
semanticColor: calendarRose CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-CALENDAR_ROSE
semanticColor: calendarStandard CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-CALENDAR_STANDARD
semanticColor: calendarTeal CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-CALENDAR_TEAL
semanticColor: calendarYellow CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-CALENDAR_YELLOW
semanticColor: color_aqua CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-COLOR_AQUA
semanticColor: color_black CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-COLOR_BLACK
semanticColor: color_blue CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-COLOR_BLUE
semanticColor: color_blue_gray CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-COLOR_BLUE_GRAY
semanticColor: color_bright_green CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-COLOR_BRIGHT_GREEN
semanticColor: color_brown CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-COLOR_BROWN
semanticColor: color_dark_blue CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-COLOR_DARK_BLUE
semanticColor: color_dark_green CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-COLOR_DARK_GREEN
semanticColor: color_dark_red CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-COLOR_DARK_RED
semanticColor: color_dark_teal CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-COLOR_DARK_TEAL
semanticColor: color_dark_yellow CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-COLOR_DARK_YELLOW
semanticColor: color_gold CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-COLOR_GOLD
semanticColor: color_gray_25 CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-COLOR_GRAY_25
semanticColor: color_gray_40 CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-COLOR_GRAY_40
semanticColor: color_gray_50 CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-COLOR_GRAY_40
semanticColor: color_gray_80 CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-COLOR_GRAY_80
semanticColor: color_green CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-COLOR_GREEN
semanticColor: color_indigo CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-COLOR_INDIGO
semanticColor: color_lavender CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-COLOR_LAVENDER
semanticColor: color_light_blue CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-COLOR_LIGHT_BLUE
semanticColor: color_light_green CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-COLOR_LIGHT_GREEN
semanticColor: color_light_orange CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-COLOR_LIGHT_ORANGE
semanticColor: color_light_turquoise CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-COLOR_LIGHT_TURQUOISE
semanticColor: color_light_yellow CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-COLOR_LIGHT_YELLOW
semanticColor: color_lime CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-COLOR_LIME
semanticColor: color_olive_green CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-COLOR_OLIVE_GREEN
semanticColor: color_orange CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-COLOR_ORANGE
semanticColor: color_pale_blue CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-COLOR_PALE_BLUE
semanticColor: color_pink CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-COLOR_PINK
semanticColor: color_plum CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-COLOR_PLUM
semanticColor: color_red CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-COLOR_RED
semanticColor: color_rose CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-COLOR_ROSE
semanticColor: color_sea_green CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-COLOR_SEA_GREEN
semanticColor: color_sky_blue CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-COLOR_SKY_BLUE
semanticColor: color_tan CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-COLOR_TAN
semanticColor: color_teal CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-COLOR_TEAL
semanticColor: color_turqoise CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-COLOR_TURQUOISE
semanticColor: color_violet CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-COLOR_VIOLET
semanticColor: color_white CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-COLOR_WHITE
semanticColor: color_yellow CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-COLOR_YELLOW
semanticColor: critical CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-CRITICAL
semanticColor: criticalvalue_dark CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-CRITICALVALUE_DARK
semanticColor: criticalvalue_light CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-CRITICALVALUE_LIGHT
semanticColor: criticalvalue_medium CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-CRITICALVALUE_MEDIUM
semanticColor: disabled CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-DISABLED
semanticColor: filter CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-FILTER
semanticColor: filtericon CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-FILTERICON
semanticColor: five CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-FIVE
semanticColor: four CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-FOUR
semanticColor: goodvalue_dark CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-GOODVALUE_DARK
semanticColor: goodvalue_light CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-GOODVALUE_LIGHT
semanticColor: goodvalue_medium CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-GOODVALUE_MEDIUM
semanticColor: group_highlighted CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-GROUP_HIGHLIGHTED
semanticColor: group_highlighted_light CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-GROUP_HIGHLIGHTED_LIGHT
semanticColor: group_level1 CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-GROUP_LEVEL1
semanticColor: group_level2 CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-GROUP_LEVEL2
semanticColor: group_level3 CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-GROUP_LEVEL3
semanticColor: intensified CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-INTENSIFIED
semanticColor: key_medium CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-KEY_MEDIUM
semanticColor: marked CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-MARKED
semanticColor: negative CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-NEGATIVE
semanticColor: none CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-NONE
semanticColor: one CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-ONE
semanticColor: popin CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-POPIN
semanticColor: positive CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-POSITIVE
semanticColor: Selection CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-SELECTION
semanticColor: standard CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-ALTERNATING
semanticColor: subtotal CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-SUBTOTAL
semanticColor: subtotal_light CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-SUBTOTAL_LIGHT
semanticColor: three CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-THREE
semanticColor: today CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-TODAY
semanticColor: total CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-TOTAL
semanticColor: transparent CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-TRANSPARENT
semanticColor: two CL_WD_GRID_DATA=>E_SEMANTIC_COLOR-TWO

vAlign

V_ALIGN

WDUI_CELL_VALIGN

vAlign: baseline

CL_WD_GRID_DATA=>E_V_ALIGN-BASELINE

vAlign: bottom

CL_WD_GRID_DATA=>E_V_ALIGN-BOTTOM

vAlign: middle

CL_WD_GRID_DATA=>E_V_ALIGN-MIDDLE

vAlign: top

CL_WD_GRID_DATA=>E_V_ALIGN-TOP

width

WIDTH

STRING