Drag and drop an Grid component onto the page:
The Grid component looks like this on the page:
The Grid component varies at runtime depending upon the components added.
The Properties view for a component shows the most common set of attributes you can set on a component, and, depending on the component, you might also see options for adding controls, actions, or other components. To open the Properties view, click
.These common attributes for the Grid component display on the hx:panelGrid and Items tabs in the Properties view. See the All Grid attributes table for a complete list of attributes. Additional configuration options for panel items are on the hx:panelGrid>Items tab:
Configuration option |
Description |
---|---|
Order of items in the panel |
Allows you to specify the order of components within the panel, using the Move Up and Move Down buttons. |
The All Attributes view shows a table
of all the attributes you can set on a component, which includes those attributes
you can access from the Properties view. To switch to the All Attributes view,
click the All Attributes icon in the upper right
corner of the Properties view.
Attribute name |
Represented in Properties view by |
Description |
---|---|---|
bgcolor |
Background color |
Specifies the background color in 6 digit hexadecimal RGB values beginning with a # symbol, or by entering a color name, for example, black, white, or blue. |
border |
Not represented |
Specifies, in pixels, the size of the border for the table. |
binding |
Not represented |
An expression that binds the component's instance (usually a user interface component) to a bean property (usually in the backing file). |
cellpadding |
Padding |
Specifies the amount of space between the border of the cell and the cell contents. If the value of this attribute is a pixel length, all four margins should be this distance from the contents. |
cellspacing |
Spacing |
Specifies, in pixels, the amount of space to leave between cells. |
columnClasses |
Not represented |
Assigns a defined CSS stylesheet style for the columns of the data table component. The CSS stylesheet file must be linked into the component's JSP before it can be used. This may be entered manually, or by clicking the button and selecting the desired classes from within the window. |
cols |
Size: Columns |
Specifies the number of columns in the grid. |
dir |
Not represented |
Specifies the component's direction when rendered at runtime.
The values can be either:
|
footerClass |
Not represented |
Assigns a defined CSS stylesheet style for the column headers of the data table component. The CSS stylesheet file must be linked into the component's JSP before it can be used. This may be entered manually, or by clicking the button and selecting the desired class from within the window. |
frame |
Not represented |
Specifies which sides of the frame surrounding a grid will be visible. |
headerClass |
Not represented |
Assigns a defined CSS stylesheet style for the column headers of the data table component. The CSS stylesheet file must be linked into the component's JSP before it can be used. This may be entered manually, or by clicking the button and selecting the desired class from within the window. |
id |
ID |
Assigns a name to a component. Should be a unique name within a JSP. |
lang |
Not represented |
The language of the component's value(s) and text content.
If omitted, the language is inherited from the containing tags (notably the
view. Specified as an ISO-standard language abbreviation code. For example,
"en" for English, "en-US" for American English, "fr" for French, "de" for
German.
Note: This does not "translate" the text in the component, rather,
it identifies the language of the component so that operations such as searching,
sorting, collating and the like are done correctly.
|
rendered |
Not represented |
Can be set to true or false:
|
rowClasses |
Not represented |
A set of classes which are cycled through as the rows are displayed. This may be defined manually, or by clicking the button and selecting the desired classes from within the window. |
rules |
Not represented |
Specifies which rules will appear between cells within a
table:
|
size |
Size: Height |
Specifies the height of the component (by number of lines, pixels or percentage of the screen). |
style |
Style: Props |
Specifies CSS style information for the component (for example, style="font-size : 8pt ; color : red"). Defines the properties (such as font and color) of the selected component. This may be done manually, or by clicking the button and selecting the desired properties from within the window. |
styleClass |
Style: Classes |
Space-separated list of CSS style classes to be applied when this element is rendered. This value must be passed through as the class attribute on generated markup. Defines the classes (such as style sheets) of the selected component. This may be done manually, or by clicking the button and selecting the desired Classes from within the window. |
summary |
Not represented |
Specifies a summary details string for user agents rendering to non-visual media. |
title |
Not represented |
Specifies the title text, shown in browser as a tooltip at runtime. Used by a browser as the alternative text of a component if the alternative text is not specified. |
width |
Size: Width |
Specifies the width of the component in either pixels or percentage. To specify percentage is to be used append % to the value. |