You can improve the readability by displaying with alternating the background colors of the grid row. SMART datagrid provides many ways to implement the requirements designed for the application situation. First, we will learn how to handle in the data cell level, and then we will see how to do the rendering in the data row level.
You can use GridBody.rowDynamicStyles to alternate the background colors of the data cell according to the row number. rowDynamicStyles are the dynamic styles applied equally in all data cells of a row, and the style property values will be determined once by each row during the grid rendering time.
grid.body().setRowDynamicStyles([{
expression: 'row % 2',
styles: { background: '#100000ff' }
}]);
"Quantity" column specifies ignoreRowDynamicStyles property as true to display the color specified in Column Style.
Also, you can use GridBody.cellDynamicStyles to alternate the background colors of the data cell according to the row number. Similarly, as rowDynamicStyles, cellDynamicStyles are the dynamic styles applied equally in all data cells of a row. However, they calculate every cell with the expression and determine the style values during the grid rendering time. If you can implement through rowDynamicStyles, you do not have to use cellDynamicStyles.
grid.body().setCellDynamicStyles([{
expression: 'row % 2',
styles: { background: '#100000ff' }
}]);
"Quantity" column specifies ignoreDefaultDynamicStyles property as true to display the color specified in Column Style.
You can also use DataColumn.dynamicStyles of the column to implement the same. However, you should specify the dynamic styles for all columns.
Before drawing the data cells, Grid Rows containing the cells will be drawn first. So, you can set the grid row styles to alternate the background colors. Since its execution performance is better than the cell dynamic styles, you should implement this way if possible.
First, implement through Default Row Style and Palette.
// Register the palette.
grid.loadPalettes([{
name: 'p01',
fills: [null, '#080000ff']
}]);
// Set palette items with using background colors.
grid.body().setRowStyles({
background: 'p(p01:row)'
});
Please note that the result of drawing the cells of "Quantity" column is different from the example of the cell dynamic styles above. Since a translucent cell has been drawn on the row, it is displayed in the overlapped color.
Besides the default row styles, you can also specify the styles by each row scope.
grid.body().setRowRangeStyles({
'row % 2': { background: '#10000080' }
});
If use the two ways above, you can implement to alternate the background colors in various ways without the code. For example, you can display with binding 3 rows as below.
grid.body().setRowRangeStyles({
'(row div 3) % 2': { background: '#10000080' }
});
Please refer to rowRangeStyles help topic.