Assigning Conditional Styles
- 2 minutes to read
In addition to static styles (see the Styles Overview topic for details), the ExpressVerticalGrid provides a way to assign conditional styles to the row headers and data cells. This is implemented via handling several events:
| Style | Description |
|---|---|
| OnGetCategoryStyle | Occurs before assigning a style for the category rows. |
| OnGetContentStyle | Occurs before assigning a style for the editor row contents. |
| OnGetHeaderStyle | Occurs before assigning a style for the editor row headers. |
The following example shows the handling of these events. It creates three styles: ACategoryStyle, AHeaderStyle, and AContentStyle for the category and editor row headers and editor row data cells respectively.
The initial appearance of the vertical grid control is shown below:
procedure TForm1.FormCreate(Sender: TObject);
begin
ACategoryStyle := TcxStyle.Create(Self);
AContentStyle := TcxStyle.Create(Self);
AHeaderStyle := TcxStyle.Create(Self);
ACategoryStyle.Color := $00D2814F;
ACategoryStyle.TextColor := clYellow;
ACategoryStyle.Font.Style := [fsBold];
AContentStyle.Color := $00E1FFFF;
AContentStyle.TextColor := clRed;
AHeaderStyle.Color := $00DEA27C;
AHeaderStyle.TextColor := clWhite;
end;
procedure TForm1.cxDBVerticalGridStylesGetCategoryStyle(
Sender: TObject; ARow: TcxCustomRow; var AStyle: TcxStyle);
begin
if TcxCategoryRow(ARow).Properties.Caption = 'Car' then
AStyle := ACategoryStyle;
end;
procedure TForm1.cxDBVerticalGridStylesGetContentStyle(
Sender: TObject; AEditProp: TcxCustomEditorRowProperties;
AFocused: Boolean; ARecordIndex: Integer; var AStyle: TcxStyle);
begin
if not (ARecordIndex = -1) then
begin
if (AEditProp.Caption = 'HP') and (AEditProp.Values[ARecordIndex] > 300) then
AStyle := AContentStyle;
end;
end;
procedure TForm1.cxDBVerticalGridStylesGetHeaderStyle(
Sender: TObject; ARow: TcxCustomRow; var AStyle: TcxStyle);
begin
if TcxEditorRow(ARow).Properties.Caption = 'HP' then
AStyle := AHeaderStyle;
end;
The result of the code execution is shown in the following screenshot:
