SMART datagrid v.1 > Examples

Back  Forward

Row Styles  Example

Similarly, as the column styles, the row styles statically specify the style properties of the specific data rows regardless of the data cell value during the run time. However, there may be endless data rows and some of them may be deleted or added during the run time, so it will become impossible to preset the style set to all data rows. 

SMART datagrid specifies the style set by each row in two ways as indicated in the code below. 

Code -1
    grid.body().setRowRangeStyles({
        '0': { background: '#10ff0000' },
        '1': { background: '#20ff0000' },
        '2': { background: '#30ff0000' },
        'rows': [{
            'range': 'row % 2 == 1',
            'styles': {
                'background': '#08000000'
            }
        }, {
        }] 
    });
Grid - 1
rows

It specifies the style set of each row through rowStyles of GridBase.body. If it is a fixed data row which will not be changed, you can set based on the row number, or set the style set by each row group which is specified through range expression in rows property. In range expression, you can use "row" variable corresponding to the data row number. 

During the rendering, the row styles are applied before other dynamic styles including the column styles. In other words, due to the lowest priority, the row styles will be overwritten by other styles. They can be used helpfully when display the rows separately regardless of the data cell values, including separating the even and odd rows. 


View Source JSP 

See Also
GridBody.rowStyles
GridBody.rowDynamicStyles
GridColumn.styles
GridBase.body
GridRowStyles
GridStyles
Dynamic Styles Overview
Expression Overview
Examples
Alternate Row Colors
Row Dynamic Styles