OnDefineRowCssClass - cWebList

Can be implemented to assign custom CSS class names to individual rows

Type: Event

Parameters: String ByRef sCSSClass

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.

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"

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

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

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 .DemoRowLow .DemoColumnBalance{
    background-color: red;   
#OWEBAPP .DemoRowMedium .DemoColumnBalance{
    background-color: orange;   
#OWEBAPP .DemoRowHigh .DemoColumnBalance{
    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.