The GRIDCOL component represents one column within a FIXGRID grid.
Inside one GRIDCOL you can define exactly one cell control as sub-component (e.g. you arrange a LABEL or a FIELD inside). The cell control itself can be any control, including e.g. a PANE which internally sub-divides into other components. The cell control is arranged as first control inside the GRIDCOL definition.
You may also arrange a second control below the GRIDCOL definition, which is then rendered in the header of the column.
Typically used attributes
All attributes are
Used inside: FIXGRID, GRIDCOLGROUP
Using inside: ACTIVEX, ADAPTIVETILECONTAINER, ADAPTIVETOOLBAR, ANIMATEICON, ARRAYGRID, AUTOCOMPLETE, AVATARICON, AWESOMEFONTICON, BROWSER, BUTTON, BUTTONCOPYPASTEACTIVATION, BUTTONMENU, BUTTONPOPUP, BUTTONPOPUPMENU, BUTTONVERTICAL, CALENDAR, CALENDARFIELD, CAMERA, CAMERARECORDER, CHARTJS, CHECKBOX, CLIENTFILEEXPLORER, CLOCK, CODEEDITOR, COLDISTANCE, COLLINE, COLORFIELD, COLORICON, COMBOBOX, COMBOFIELD, DIRECTHTMLINSERT, DRAWAREA, DYNAMICCONTENT, FIELD, FILECHOOSER, FILEDOWNLOADBUTTON, FILEDOWNLOADLINK, FILEUPLOAD, FILEUPLOADBUTTON, FILEUPLOADBUTTONASYNCHRONOUS, FILEUPLOADLINK, FILEUPLOADLINKASYNCHRONOUS, FIXGRID, FIXGRIDTOUCHBUTTON, FIXGRIDWITHGROUPING, FONTICON, FORMATTEDFIELD, FULLSCREENBUTTON, FXCHART, GRIDHEADERLABEL, GRIDROWSELECTOR, HELPICON, HEXIMAGE, HEXIMAGEMAP, HIDEABLE, HYPERLINK, ICON, ICONSEPTEXT, IFRAMEINCLUDE, IMAGE, IMAGEANONYMIZER, IMAGEANONYMIZERDIRECT, IMAGEMAP, IMAGESHAKER, JRVIEWER, KEYBOARDSCANNER, KEYSELECTOR, LABEL, LABELCONTAINER, LABELMULTILINE, LABELVERTICAL, LINK, LINKVERTICAL, LIST, LONGTEXTFIELD, MEDIAPLAYER, MENUBAR, MULTILABEL, OSMVIEWER, OUTLOOKBAR, PAGEBEANCOMPONENT, PAGEBEANINCLUDE, PANE, PARENTEXIT, PASSWORD, PDFRENDERER, PDFRENDERERVIAURL, PICKLIST, POOLEDBROWSER, PROGRESSBAR, QRCODESCANNERJSQR, RADIAL, RADIOBUTTON, RADIOBUTTONGROUP, REPEAT, RGRAPH, SCANFIELD, SCENEJS, SCHEDULE, SCROLLANCHOR, SCROLLBAR, SCROLLNOTIFIER, SCROLLPANE, SHIFTCONTAINER, SIMPLEHTMLEDITOR, SLIDECONTAINER, SLIDER, SLIDERRANGE, SMARTLABEL, SMARTTEXTAREA, SPANGRID, SPINNER, SUBPAGE, SVGVIEWER, SYSTEMICON, TABBEDLINE, TABBEDLINEVERTICAL, TEXTAREA, TEXTAREAWITHCOMMENT, TEXTEDITOR, TEXTPANE, TEXTPANEVERTICAL, TEXTWITHLINKS, TIMEPICKER, TOGGLE, TOUCHFIELD, TOUCHFIELDNUMERIC, TOUCHSELECTOR, TOUCHSIGNATURE, TOUCHVIRTUALKEYBOARD, TREENODE, VIDEO, WINDOWSIZER, WORKPLACEPERSPECTIVESELECTOR
Text that is passed as control content to the accessible support devices (e.g. screen readers).
Binding to server side method that processes the events coming from this component.
The attribute value must be an expression.
#{methodBinding} | Method binding |
Special binding to component adapter object instance on server side. The component adapter must be an instance of IComponentAdapterBinding. For some components (e.g. FIXGRID) there is an extended interface (e.g. IFIXGRIDComponentAdapterBinding).
The attribute value must be an expression.
#{tobedefined} | Binding to IComponentAdapter instance |
Horizontal alignment of content.
left | left (transferred into right when starting client in right to left mode) |
left! | left (still is left when starting client in right to left mode) |
center | center |
right | right (transferred into left when starting client in right to left mode) |
right! | right! (still is right when starting client in right to left mode) |
leading | leading |
trailing | trailing |
Name of macro that is used for generating certain attributes of this component. Please pay attention: the value of this attribute is read one time for each control and cannot be changed afterwards.
The attribute value must not be changed once the component is created.
By default the data for the grid column can be exported into various formates (e.g. csv, pdf, xml). By using this attribute you can exclude this grid column to be part of any exported data.
false | Column is exported (default) |
true | Column is not exported |
By default a grid row is selected when the user puts the focus into the component that is contained within the column. By defining this attribute you can override this behaviour - there will be no grid selection when focussing this component.
The attribute value must not be changed once the component is created.
false | Focus in component will select row (default) |
true | No row selection |
Background color of the component. Any RGB value can be chosen using format #rrggbb.
#FFFFFF | White |
#000000 | Black |
#FF0000 | Red |
#00FF00 | Green |
#0000FF | Blue |
#0000FF30 | Blue with a transparency of x30. |
Background paint commands. There is a sequence of paint commands which can be executed one after the other by listing them as semicolon separated list. - By appending certain suffixes to a command you can define that the command is only executed in a certain situation. Available suffixes are: _empty (content of component is empty), _focus, _nofocus, _enabled, _disabled, _mouseover. Multiple suffixes can be used in parallel (e.g. write_empty_focus).
----- | ----- bgpaint commands for all clients ----- |
error() | Component indicates error. |
mandatory() | Component indicates mandatory input. Only is shown if component does not have any content yet. |
bgbackground(#FF0000) | Background with one color |
bgbackground(#FF0000,#0000FF,vertical) | Background as gradient of two colors |
bgimage(left,/images/xyz.png) | Image at certain position |
bgwrite(left,...text...) | Text at certain position |
bgwrite(left,...text...,#800000,12) | Text at certain position with defined color and size |
----- | ----- bgpaint commands for Java clients ----- |
rectangle(0,0,100%,100%,#FF0000) | Red rectangle |
rectangle(20,20,100,100,#FF0000) | Red rectangle from 20,20 to 120,120 |
rectangle(20,20,100%-40,100%-40,#FF0000) | Minus absolute values is allowed after percentage definitions |
rectangle(0,0,100%,100%,#FF0000,#00FF00,vertical) | Rectangle with color changing from red to green in vertical direction |
roundedrectangle(0,0,100%,100%,10,10,#FF0000,#00FF00,vertical) | Rectangle with color changing from red to green in vertical direction |
line(0,0,100%,100%,1,#00FF00) | Green line crossing the whole rectangle, from coordinate 0,0 to coordinat 100%,100%, thickness of line is 1 |
image(0,0,/images/xyz.png,lefttop) | Image output x,y,image,position (lefttop/centermiddle/rightbottom...) |
image(0,0,200,100,/images/xyz.png,lefttop) | Image output x,y,width,heigh,image,position (lefttop/centermiddle/rightbottom...) |
scaledimage(0,0,200,100,/images/xyz.png,lefttop) | Scaled image output, the width/height ration is kept while scaling : x,y,width,heigh,image,position (lefttop/centermiddle/rightbottom...) |
heximage(0,0,08FF40324672849CDFE...,lefttop) | Image output x,y,hexadecimal image,position (lefttop/centermiddle/rightbottom...) |
heximage(0,0,200,100,08FF40324672849CDFE...,lefttop) | Image output x,y,width,height,hexadecimal image,position (lefttop/centermiddle/rightbottom...) |
scaledheximage(0,0,200,100,08FF40324672849CDFE...,lefttop) | Scaled image output x,y,width,height,hexadecimal image,position (lefttop/centermiddle/rightbottom...) |
border(0,0,100%,100%,#C0C0C0,2) | Rectangular border with thickness 2 |
roundedborder(0,0,100%,100%,10,10,#C0C0C0,2) | Rounded border with thickness 2 |
write(0,0,Some text,lefttop) | Some text in the left top corner |
write(50%,50%,Some text,20,#00FF00,centermiddle) | Some text in the left center, font size 20, font color green |
write(50%,50%,Some text,20,#00FF00,bold,centermiddle) | Some text in the left center, font size 20, font color green,bold |
write(50%,50%,Some text,20,#00FF00,italic,centermiddle) | Some text in the left center, font size 20, font color green,italic |
write(50%,50%,Some text,20,#00FF00,normal,centermiddle) | Some text in the left center, font size 20, font color green,normal |
write(0,100%,Some text,20,#00FF00,default,lefttop,90) | Some text in the left bottom corner, font size 20, font color green, 90 degrees rotated |
write(20,100%,Some text,20,#00FF00,default,lefttop,90,-1,1) | Some text in the left bottom corner, font size 20, font color green, 90 degrees rotated. x scaling -1, y scaling 1 |
write(20,100%,Some text,20,#00FF00,bold,lefttop,90,-1,1) | Some text in the left bottom corner, font size 20, font color green, 90 degrees rotated. x scaling -1, y scaling 1 |
writeifempty(0,0,Some text,lefttop) | Same as write-command, but now only visible if component contains data |
writeifempty(50%,50%,Some text,20,#00FF00,centermiddle) | Same as write-command, but now only visible if component contains data |
writemultiline(0,0,100%,100%,Some text) | Some text into the defined rectangle. Only fully supported with FX client, in Swing client the text will be output as one line. |
writemultiline(0,0,100%,100%,Some text,20,#FF0000,bold) | Some text into the defined rectangle. In additional font size, text color and text style (normal,bold,italic) are passed. Only fully supported with FX client, in Swing client the text will be output as one line. |
oval(0,0,100%,100%,#FF0000) | Red ellipse |
oval(0,0,100%,100%,#FF0000,#00FF00,vertical) | Red ellipse with color changing from red to green |
ovalborder(0,0,100%,100%,#FF0000,2) | Red ellipse border, red, 2 pixels thick |
grid(100,#00000020) | Grid with line distance 100, black line color - with transparency |
nodisabled() | Switches off the automated shading of disabled input components |
background(#FF0000) | Sets the background of the painted area. |
backgroundnofocus(#FF0000) | Sets the background of the painted area - which is only drawn if the component does not hold the focus. |
repeatimage(/images/xyz.png) | The image is repeated and drawn all over the available space. |
The color of the border that is rendered between the controls of the grid. When no border color is defined then the background will shine through.
#FFFFFF | White |
#000000 | Black |
#FF0000 | Red |
#00FF00 | Green |
#0000FF | Blue |
#0000FF30 | Blue with a transparency of x30. |
Width of the border between the cells of the grid.
0 | No border between cells. |
1 | Border of 1 pixel height |
Name that is assigned to the component at client side: there is no specific function associated with the name - but it can be used on client side to describe the component in a clearer way. The name is e.g. used by UI test tools that replay certain user interaction sequences - and that reference components via their name.
Allows the user to move the column and to place other columns in front/behind the column.
true | Enabled (default) |
false | No moving of columns by the user |
By default the user can resize the column to any width. This may have the consequence that the tile text and titel content will be abbreviated or cut. By defining true you specify that the user cannot resize the column to a width which is lower than the content of the title/header cell.
false | (default) No restrictions during resizing |
true | Title/Header always shown |
Allows the user to change the size of the columns.
The attribute value must not be changed once the component is created.
true | Enabled (default) |
false | No sizing of columns by the user |
Comment that can be asigned to any component. The comment is not operationally used.
Any text | Any text |
Configuration information that is attached to this component. This information is not functionally used by CaptainCasa, but may be used for any application specific purpose.
When switching to true, then the width of a column is dynamically calculated out of the width of its cells on client side. But, pay attention: the client only is aware of these items which actually are shown - so the consequence is, that the size of the column changes with every scroll operation. When setting to true, then the size defined within the WIDTH attribute is treated as minimum size, that is always guaranteed.
false | sizing according to width definition (default) |
true | dynamic width sizing enabled |
Reference to the value of the grid column that is explicitly used for export activites. This attribute can be used in addition to the SORTREFERENCE when binding the sorting to some other item properties than the exporting.
Format of the value that is referenced by EXPORTREFERENCE.
int | int |
long | long |
short | short |
float | float |
double | double |
date | date |
time | time |
datetime | date and time |
biginteger | biginteger |
bigdecimal | bigdecimal |
password | Only for LABEL-usage: output as password |
boolean | Only for LABEL-usage: output of true/false/null with corresponding zapf-dingbat characters |
Format mask of the value that is referenced by EXPORTREFERENCE.
short | Short format (date/time/datetime only) |
medium | Medium format (date/time/datetime only) |
long | Long format (date/time/datetime only) |
dec* | Number of decimal digits that are always shown, * any number (float/double/bigdecimal only) |
dec1 | 1 decimal digit (always) |
dec2 | 2 decimal digits (always) |
dec3 | 3 decimal digits (always) |
decmax* | Number of decimal digits that are shown - if available |
decmax1 | 1 decimal digit (if not 0) |
decmax2 | 2 decimal digits (if not 0) |
decmax3 | 3 decimal digits (if not 0) |
...explicit format... | Any format string in which the following replacements are done: y=Year,M=month,d=day,H=hour,m=minute,s=second |
yyyy-MM-dd | Example for military date format |
yy-MM-dd | Example for military date format, year with 2 digits |
E yyyy-MM-dd | Name of week day, then followed by military date format |
HH:mm | Hour (0-23) with minutes |
hh:mm aa | Hour (0-12) with minutes, am/pm |
HH:mm:ss | Hour with minutes and seconds |
...special formats... | Special formats for integer input |
#### | No thousands separator |
...special formats... | Special formats for decimal input |
dig* | Number of decimal digits depends on value, so that * is the minimum number of digits that is shown in total |
dig2 | 1.1111 > 1.1, 11.11 > 11, 111.1 > 111 |
dig3 | 1.1111 > 1.11, 11.11 > 11.1, 111.1 > 111 |
*_adp | ANY DECIMAL POINT: appendix to all decimal format definitions, the last , or . is interpreted as decimal separator always |
Time zone of the value that is referenced by EXPORTREFERENCE. Only required if value is a Date-value.
LOCAL | To be set if using LocalDate/LocalTime on server side |
----- | -------------------- |
GMT | GMT - Greenwich Mean Time (no daylight saving) |
UTC | UTC - Coordinated Universal Time (no daylight saving) |
----- | -------------------- |
CET | CET - Central European Time |
Europe/Paris | Europe/Paris |
Africa/Harare | Africa/Harare |
Asia/Tel_Aviv | Asia/Tel_Aviv |
... | ... |
When exporting the grid to PDF or XLS (Excel) then the exporter tries to calculate a column width out of the normal WIDTH attribute. In some cases (e.g. percentage values) this calculation is not really optimal. You can define an explicit export width which overrides any calculation.
automated calculation (default) | |
100 | 100 |
200 | 200 |
300 | 300 |
Defines if the component is focusable. The default depends on the component: typical input components (field, check box, ...) are focusable by default, while typical structure components (pane, label, ...) are not focusable by default.
true | Focusable |
false | Not focusable |
Semicolon separated list of font attributes. Valid attributes are: faces (font family), size (integer number), weight (bold), posture (italic)
family:Arial | family:Arial |
family:Courier | family:Courier |
size:12 | size:12 |
weight:bold | weight:bold |
size:12;weight:bold | size:12;weight:bold |
size:12;posture:italic | size:12;posture:italic |
Foreground color of the component. Any RGB value can be chosen using format #rrggbb.
#FFFFFF | White |
#000000 | Black |
#FF0000 | Red |
#00FF00 | Green |
#0000FF | Blue |
#0000FF30 | Blue with a transparency of x30. |
Reference to image within your web application. The image is defined in an absolute way (e.g. /images/abc.png) - the root directory for absolute addressing is the directory of the web application.
/images/abc.png | Image /images/abc.png |
/images/svg/def.svg | Image /images/svg/def.svg |
If true then the border and the padding of the component is kept. Otherwise border and padding are managed by the grid.
The attribute value must not be changed once the component is created.
false | Border/padding are removed by grid processing (default) |
true | Border/padding of component are kept. |
If set to true then the text is rendered in multiple lines if required.
false | Single line (default) |
true | Multi line |
Only considered if FIXGRID-ONLYSHOWCOLUMNS is set to true: you may define a priority to each column, in case of insufficient screen space these columns with lowest priority are not shown first.
1 | Highest priority |
2 | ...lower than 1... |
3 | ...lower than 2... |
lowest priority (default) |
Reference to the id of a POPUPMENU definition that is available either in this page or in a page that includes this page.
Reference to an outside object that is the content behind the component. E.g. a field is representing a certain field of a database table: in this case you could define the value table;column. The reference plays a siginficant role within the attributemacro management.
The attribute value must not be changed once the component is created.
ref | One reference |
ref1;ref2 | Two references |
ref1;ref2;ref3 | Three references |
Flag that indicated if this component is rendered at all. If set to false then the component is not rendered - there is no component data sent to the client.
The attribute value must be an expression.
true | Component is rendered (default) |
false | Component is not rendered |
If enabled then the user can open a search field by clicking with the right mouse button onto the header column.
The attribute value must not be changed once the component is created.
true | Search is enabled. |
false | Search is not enabled (default) |
If set to false then no sorting is supported for this grid column.
true | Sort is enabled (default). |
false | Sort is not enabled |
Reference to the value of the grid column. The value is the one that is referenced within the grid cell (e.g. the field). On GRIDCOL level the reference is required for e.g. sorting and for e.g. export functions (PDF export). Then name is a bit confusing: the first usage of the reference was sorting, so that's the background behind the name SORTREFERENCE. In the meantime, many more functions access this reference, so a better name would be VALUEREFERENCE. Due to compatibility we still keep the name SORTREFERENCE. - If the component inside a GRIDCOL is a straight component (e.g. FIELD, LABEL, ...), and not a composite component (e.g. PANE) then the SORTREFERENCE is determined automtically out of the component. You only need to define in case of complex cell components.
The attribute value must be an expression.
Format of the value that is referenced by SORTREFERENCE.
int | int |
long | long |
short | short |
float | float |
double | double |
date | date |
time | time |
datetime | date and time |
biginteger | biginteger |
bigdecimal | bigdecimal |
password | Only for LABEL-usage: output as password |
boolean | Only for LABEL-usage: output of true/false/null with corresponding zapf-dingbat characters |
Format mask of the value that is referenced by SORTREFERENCE.
short | Short format (date/time/datetime only) |
medium | Medium format (date/time/datetime only) |
long | Long format (date/time/datetime only) |
dec* | Number of decimal digits that are always shown, * any number (float/double/bigdecimal only) |
dec1 | 1 decimal digit (always) |
dec2 | 2 decimal digits (always) |
dec3 | 3 decimal digits (always) |
decmax* | Number of decimal digits that are shown - if available |
decmax1 | 1 decimal digit (if not 0) |
decmax2 | 2 decimal digits (if not 0) |
decmax3 | 3 decimal digits (if not 0) |
...explicit format... | Any format string in which the following replacements are done: y=Year,M=month,d=day,H=hour,m=minute,s=second |
yyyy-MM-dd | Example for military date format |
yy-MM-dd | Example for military date format, year with 2 digits |
E yyyy-MM-dd | Name of week day, then followed by military date format |
HH:mm | Hour (0-23) with minutes |
hh:mm aa | Hour (0-12) with minutes, am/pm |
HH:mm:ss | Hour with minutes and seconds |
...special formats... | Special formats for integer input |
#### | No thousands separator |
...special formats... | Special formats for decimal input |
dig* | Number of decimal digits depends on value, so that * is the minimum number of digits that is shown in total |
dig2 | 1.1111 > 1.1, 11.11 > 11, 111.1 > 111 |
dig3 | 1.1111 > 1.11, 11.11 > 11.1, 111.1 > 111 |
*_adp | ANY DECIMAL POINT: appendix to all decimal format definitions, the last , or . is interpreted as decimal separator always |
Time zone of the value that is referenced by SORTREFERENCE. Only required if value is a Date-value.
LOCAL | To be set if using LocalDate/LocalTime on server side |
----- | -------------------- |
GMT | GMT - Greenwich Mean Time (no daylight saving) |
UTC | UTC - Coordinated Universal Time (no daylight saving) |
----- | -------------------- |
CET | CET - Central European Time |
Europe/Paris | Europe/Paris |
Africa/Harare | Africa/Harare |
Asia/Tel_Aviv | Asia/Tel_Aviv |
... | ... |
Style class names that are applied to this component.
In CaptainCasa you can define styles definitions for components. A style definition is a definition of a set of default attribute values that are applied to the component. In case you want to differenciate between different usage types of the component you can apply multiple styles - and use the stylevariant attribute to select between.
Text that is shown and (dependent from the component type) edited inside the component. The terminator is a decimal byte value.
Abbreviated text that is shown if there is not sufficient screen space for the normal text.
Cut the text if no sufficient space available.
true | Cut text if not enough space |
false | Do not cut text (default) |
Transformation of text before it is displaeyd
lowercase | Display in lowercase |
uppercase | Display in uppercase |
capitalize | Transforms the first character of each word to uppercase |
Width of the text label that is part of the column header. By default this is 100%, because the label spans the whole column header. But you may set an explicit value when using the possibility to explicitly arrange a component on the right of the text.
100 | 100 Pixels |
120 | 120 Pixels |
200 | 200 Pixels |
50% | 50 percents |
100% | Full available width |
100%;100 | Full available width, minimum 100 pixels |
100%;100;500 | Full available width, minimum 100 pixels, maximum 500 pixels |
100%;;500 | Full available width, maximum 500 pixels |
Text that is shown as hint when the user stays with the mouse on top of the control for a while.
...anytext... | Text that is displayed as tooltip. |
server:true | Indicator that tooltip for the component is managed on server side. The actionListener will be invokde with events BaseActionEventTooltipStarted and BaseActionEventTooltipEnde. On server side you may implement some modeless popup in order to show some more complex tooltip |
server:true;opendelay:1000 | Duration in milliseconds after which a tooltip event is triggered when the user moves the mouse on top of this component |
If set to true then a SMARTLABEL is user for rendering the text. This allows you to pass smart text definitions as text.
false | Normal label used (default) |
true | Smart label used (single line) |
multiline | Smart label used (multi line) |
Width of the control. Either defined as absolute value or as percentage value. Pay attention when using percentage sizing: the size refers to what is given from the components above. When using percentage sizing then you may use an extended syntax: "xxx%;<min>;<max>": in this case the minimum and maximum definitions are respected. - Please note: the sizing may be completely taken over by the parent component (e.g. if a component is used in a grid cell), in this case the size definintions on this component level are obsolete.
The attribute value must not be changed once the component is created.
100 | 100 Pixels |
120 | 120 Pixels |
200 | 200 Pixels |
50% | 50 percents |
100% | Full available width |
100%;100 | Full available width, minimum 100 pixels |
100%;100;500 | Full available width, minimum 100 pixels, maximum 500 pixels |
100%;;500 | Full available width, maximum 500 pixels |