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:

• General Hints

• Styling ROWTABLEAREA2, ROWTABLEAREA3 and Headers

---

General Hints

When to adapt style variables and when to adapt style classes

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.

Styling ROWTABLEAREA2, ROWTABLEAREA3 and Headers

How to style the grid headers

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
  

How to style the sort icons

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

How to style (background) colors of your grid cells

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

How to style (background) colors of your header

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

How to set common style attributes like padding for all cells in a grid

If you want to set the same padding value for all cells in the grid adapt the style setting:

TABLEAREA
   TABLEAREABorder>tbody>tr>td

How to set different style attributes like padding for all header and content cells

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.

How to customize the border style of the grid

To adapt general table settings such as the border for the grid, adapt the style classes under TABLEAREA.