OnDefineRowCssClass - cWebList

Parameter	Description
sCSSClass (ByRef)	Name of the CSS class to use

Procedure OnDefineRowCssClass String ByRef sCSSClass

It is possible to assign custom CSS classnames to individual rows. For this, the OnDefineRowCssClass event can be implemented or the sCssClassName member of the tWebRow struct can be used. The psCssClass that is set on the column object is also applied on every cell of that column. Combining these features means that every cell can be individually addressed within the CSS stylesheet.

Sample

Note: the global buffers will have the proper record loaded for a data aware grid.

Object oWebList1 is a cWebList
    Object oCustomer_Balance is a cWebColumn
        Entry_Item Customer.Balance
        Set psCaption to "Balance"
        Set piWidth to 50
        Set psCSSClass to "DemoColumnBalance"
    End_Object

    Procedure OnDefineRowCssClass String ByRef sCSSClass
        Forward Send OnDefineRowCssClass (&sCSSClass)

        If (Customer.Balance < 1000) Begin
            Move "DemoRowLow" to sCSSClass
        End
        Else If (Customer.Balance > 5000) Begin
            Move "DemoRowHigh" to sCSSClass
        End
        Else Begin
            Move "DemoRowMedium" to sCSSClass
        End
    End_Procedure
End_Object

The code example above assigns the custom "DemoColumnBalance" classname to the balance column. Then in OnDefineRowCssClass (executed for each row), it defines a special class based on the customer its balance ("DemoRowLow", "DemoRowMedium" and "DemoRowHigh").

#OWEBAPP .DemoColumnBalance .DemoRowLow {
    background-color: red;   
}
#OWEBAPP .DemoColumnBalance .DemoRowMedium {
    background-color: orange;   
}
#OWEBAPP .DemoColumnBalance .DemoRowHigh {
    background-color: green;   
}

The CSS code above is placed in the Application.css file and changes the background color of the balance column based on the CSS class that is applied to the row.