Shading and Dividers PropertiesAlternate Row Shading

Description

Enables or disables alternate row shading for the Grid component.

Discussion

The Alternate Row Shading property enables rows with alternating colors. When checked, two additional properties are exposed: Even row band size and Odd row band size.

The Even and Odd row band size properties define the number of Grid rows that will use the same background color before switching to the alternate color. 'Even' and 'odd' refer to the alternating colors.

Even row band size 1, Odd row band size 1

Even row band size 2, Odd row band size 1

Specifying Colors

The colors used when alternating row colors are defined in the Web Theme assigned to the Grid component. The Data alt class name property in the Grid's web theme configuration defines the class name(s) applied to the alternate rows. Odd rows in the Grid use the default background color. Even rows use the Data alt class name.

You can change the color several ways: overriding the color locally using CSS, creating and assigning a new sub-theme to the Grid, or copying an editing the Grid's Web Theme.

The Data alt class name property for the Grid's base sub-theme

The Alpha web theme defines the alternate background color in the .gridDataAlt class. The SASS definition in the Alpha theme for the class is shown below:

.gridDataAlt {
background: $backVLShadeColor;
}

$backVLShadeColor is a SASS variable defined in the Alpha theme that contains the background color. You can override this color in the Grid's CSS by setting the background for the .gridDataAlt class. This CSS can be defined in the Local CSS definitions for the Grid component. For example:

.gridDataAlt {
    background: green;
    color: white;
}

Overriding the gridDataAlt class background in Local CSS definitions

Grid using the Alpha theme with custom alternate row colors

See Also

• Even row band size
• Odd row band size