Column Class property in Grid and Tabular Grid

Official Content
This documentation is valid for:
Sets the class that styles a column of a Grid included in a Web Panel or a column of a Tabular Grid included in a Panel.


Generators: .NET, Java, Angular


For each column of a Grid included in a Web Panel or a Tabular Grid included in a Panel, you can set the Column Class property (with the name of a class) to give a style to it.

Runtime/Design time

This property applies both at runtime and at design time.


The following image shows a Web Panel that contains a Grid in its Web Layout. For each column of the Grid, the Column Class property can be set.

Column Class to style the columns of a Grid - v18u5 Product Transaction

As you can see, for the second column of the Grid (ProductDesc attribute), the Column Class property is set to GridColumn. GridColumn is the name of a predefined class included in every Web Theme object.

Suppose that for the GridColumn class of the Web Theme you are using you set the Background Color property, as shown below:

GridColumn Class - Background color set v18u5

At runtime, the second column (ProductDesc attribute) of the Web Panel Grid will be shown as follows:

Column Class style in Product Description v18u5

The Column Class property can also be set at runtime. For example, look at the following Web Panel object; in this case, it contains a Grid with variables.

Style each columns of a Grid - v18u5 Example at runtime

To solve the same scenario as the example above, you can define the following code:

Event Start
      &ProductDesc.ColumnClass = "GridColumn"

In addition, when setting the ColumnClass property at runtime, you can set it for a column, line by line.

Suppose you need to set the column showing ProductPrice with a red background color for the rows of the Grid whose price is higher than 500.

The following code solves this requirement:

Event Grid1.Load
    For each Product
        &ProductId = ProductId
        &ProductDesc = ProductDesc
        &ProductPrice = ProductPrice
        if &ProductPrice >500
            &ProductPrice.ColumnClass = "RedColumn"
            &ProductPrice.ColumnClass = "GridColumn"

Consider that the "RedColumn" class must be defined as a child node of the GridColumn predefined class.

At runtime, you will see:

Column Class by line style in Product Price v18u5

The Column Class property is very useful for developing Responsive Web Applications. See How to design a Responsive Web Application: Hiding a column in a grid.

See Also

gx-grid-column-class property
Class property