
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:
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 |
|---|---|---|---|
STRING |
(automatic) |
No |
|
WDUI_CELL_BG_DESIGN |
transparent |
Yes |
|
I |
1 |
No |
|
STRING |
No |
||
STRING |
No |
||
WDUI_CELL_HALIGN |
beginOfLine |
No |
|
STRING |
No |
||
STRING |
No |
||
STRING |
No |
||
STRING |
No |
||
| semanticColor | WDUI_TABLE_CELL_DESIGN | standard | Yes |
WDUI_CELL_VALIGN |
baseline |
No |
|
STRING |
No |
Other properties that can be inherited are defined in the related higher-level classes. The related UI elements are:
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 |
|---|---|---|
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 |
|
COL_SPAN |
I |
|
DRAG_DATA |
STRING |
|
HEIGHT |
STRING |
|
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 |
|
PADDING_BOTTOM |
STRING |
|
PADDING_LEFT |
STRING |
|
PADDING_RIGHT |
STRING |
|
PADDING_TOP |
STRING |
|
| 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 | |
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 |
STRING |