Recents

Column Class Property for the Grid in Web Environment

This documentation is valid for:

The objective of this property is to be able to set the Cascading Style Sheet Class for the grid column.

Description

The Standard Grid control has the Column Class property for each of its columns. The property is also available for the Grid class in the Theme.

The following figure shows how to display this property, for each grid's column:

Consider that the Column Class property is for setting the column class, whereas the Class Property is for setting the class of the control inside the cell (which can be an attribute, a variable, or an image).

In the image above, the Class Property is set to the Attribute class, while the Column Class property is set to "GridColumn" class. This class - the "GridColumn" class- is predefined and it is located under the Classes node of the Theme, as shown in the figure below:

Although the Column Class property is left with an empty value in new grids, the user can configure it with GridColumn class or any other child node of it, which should be previously created by the user.

The Column Class property can also be set as a runtime property. See the example below.

Samples

Example: setting the "Column Class" property for a grid's column

Consider a scenario where you need to set the background color of the "Price" column to red, for each row of the "Products" grid, which has a price greater than 50.
In this case, the load code of the grid could be as follows:

Event grid1.Load
    for each product
        &productid = productId
        &productdesc = productDesc
        &productprice = productPrice
        if &productprice >50
            &productprice.ColumnClass = "RedColumn"
        else
            &productprice.ColumnClass = "GridColumn"
        endif
    grid1.Load()
    endfor
endevent

In this example, the "RedColumn" class should be defined as a child node of the GridColumn predefined class.

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

Example: Setting the Column Class property for all the columns of the grid

The Column Class property is also available for the Grid Class in the Theme. So, you can configure the style for all the columns of the grids who are associated with that Grid Class.

Consider the following example where the grid is associated with the GridLiteraryWork class, whose Column Class property is set to another class, who gives the desired appearance to all the columns of the grid.

Scope