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.

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:

sort0<togglestylevariant>.gif = unsorted (Example: sort0ABC.gif)
sort1<togglestylevariant>.gif = sort descending (Example: sort1ABC.gif)
sort2<togglestylevariant>.gif = sort ascending (Example: 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 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 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.