In many applications you would want your grids to have the same style in the whole application. This can be achieved via adapting the corresponding style variables and/or style classes of your style sheet using the Style Sheet Editor tool as described in the Ajax Developer documentation.
The following gives some hints about the most frequent customizations. The NJXDEMOS contain running samples.
This document covers the following topics:
Many controls have a headline (TEXTGRID*, ROWTABLEAREA2). If you want to
change the background color for the headlines in all these controls, simply
adapt the variable @@HEADLINEBACKGROUND@@.
If you only want to adapt the background color in one specific control, adapt the corresponding style class.
As grid headers you usually have LABEL controls with property
asheadline=true:
<tr> <label asheadline="true" name="Column 1" ...></label> <label asheadline="true" name="Column 2" ...></label> </tr>
Alternatively, you are using GRIDCOLHEADER controls:
<tr> <gridcolheader name="Column1" ...></gridcolheader> <gridcolheader name="Column1" ...></gridcolheader> </tr>
In both cases, the following applies:
To change the headline background color for multiple controls, simply
adapt the variable @@HEADLINEBACKGROUND@@ in the
General tab of the Style Sheet Editor tool.
To change the headline background color only for the headers in ROWTABLEAREA2 and ROWTABLEAREA3 or if you want to do more advanced header styling, adapt the style setting:
LABEL
LABELCellHeadline
You can apply your own sort icons by setting the attribute
togglestylevariant in your GRIDCOLHEADERs:
<gridcolheader name="Column1" togglestylevariant="ABC" ...></gridcolheader>
As value for togglestylevariant use a
simple short string. Mostly you would use a subset from your style sheet name.
Copy your own sort icon images to a subfolder named images of your user interface component. Adhere to the following naming conventions for the file names:
| Sort status | File name | Example |
|---|---|---|
| unsorted | sort0<togglestylevariant>.gif | sort0ABC.gif |
| sort descending | sort1<togglestylevariant>.gif | sort1ABC.gif |
| sort ascending | sort2<togglestylevariant>.gif | sort2ABC.gif |
A simple way to adapt colors for the grid cells is: In the TR or STR of
your REPEAT control set the withalterbackground
property to true:
<repeat>
<str withalterbackground="true" ...>
<field valueprop="somefield" ...>
Now you can simply adapt the variables
@@EVENCELLBACKGROUND@@ and
@@ODDCELLBACKGROUND@@ using the Style Sheet Editor
tool. This will also change the background color in TEXTGRID* controls to the
same value.
To change the background color only for ROWTABLEAREA2 and ROWTABLEAREA3 or if you want to do more advanced row styling, adapt the style settings:
STR STRRowEven STRRowOdd
If your header row consists only of GRIDCOLHEADER controls, you would usually style your header cells as described above. Sometimes you have additional controls like a TOGGLE attribute in the header row of your grid. In this case, you want to set a specific background color for the whole header row including the cells with the TOGGLE controls.
To style the header row in general, set the property
asheadline in the TR container of the header as
follows:
<tr asheadline="true">... </tr>
Then you can adapt the style in the style class:
TR TRHeadline
If you want to set the same padding value for all cells in the grid adapt the style setting:
TABLEAREA TABLEAREABorder>tbody>tr>td
If you have resizable headers you usually do not want to have the same style settings of your content cells in the header. For instance, you do not want to set padding attributes in the header but would like to have general padding settings in the content cells.
To style the content classes use the style classes under STR in the Stylesheet Editor tool. For example you could set padding-left and padding-right style attributes for the content cells in the following style classes:
STR STRRowSelected STRRowUnSelected
For the header cells you would set different values for the padding-left and padding-right attributes in the following style class:
TR TRHeadline
Since padding values are not inherited down an HTML table in HTML5, you
need to additionally set the values for the
padding-left and
padding-right attributes to inherit
in the following style class:
TABLEAREA TABLEAREABorder>tbody>tr>td
That way, you are actually setting different values for the different rows, thus making sure these different values are inherited down the cells underneath the rows.
To adapt general table settings such as the border for the grid, adapt the style classes under TABLEAREA.