In Column Styles example, we have learned how to specify Column Styles, and in Cell Renderers example, we have covered one or two renderers. However, those may not be enough to effectively present the data. So, we may need a row style specification besides the column basis style, that is the style specification based on values.
However, the number of rows which are loaded or added to the grid have no limit theoretically, so it seems to be impossible to specify the style by each cell which would have an excessive number due to the combination of the rows and columns. In addition, the grid is not fixed by the data loaded in the early stage but can be changed all the time by user input, so it should dynamically respond to the changing values.
In SMART datagrid, there are several ways to specify the style value depending on the state of the value or row. In this example, we would learn the simplest way.
The simplest way to specify dynamic style is to set dynamicStyles property of the column. One dynamic style consists of the expression which determines whether to apply the style and the style properties.
{
"name": "OrderDate",
"fieldName": "order_date",
"dynamicStyles": [{
"expression": "value >= date('2015-01-01 00:00')",
"styles": {
"background": "#100000ff",
"color": "#ff000088"
}
}],
...
}
Order Date column is connected to a date type field of order_date. If the cell value is later than a specific date in the determination, it will display background and color differently. In the determination, value and date are both operators, which respectively convert the cell value currently being drawn and ISO-8601 string on the right side to Date value.
As shown in the code above, since dynamicStyles are array properties, they can specify one or more dynamic styles, and it means they calculate all the determinations of each cell and reflect all of the properties which return true. However, if it is the case of specifying the same property value to different values, the order will become very important.
{
"name": "UnitPrice",
"fieldName": "unit_price",
"dynamicStyles": [{
"expression": "value > 500",
"styles": {
"background": "#10000000"
}
}, {
"expression": "value > 700",
"styles": {
"background": "#20000000"
}
}, {
"expression": "value > 800",
"styles": {
"background": "#30000000"
}
}],
...
}
In the code above, it specifies background property all depending on the value. So, if specify in the order of "800, 700, 500" rather than "500, 700, 800", you will not be able to get the desired result.
In most cases, this list mode is helpful when set different property values depending on the determination. As in the example above, if you need to specify the same properties in one type of determination, you should use DynamicStyleCase as in the code below.
{
"name": "Quantity",
"fieldName": "quantity",
"dynamicStyles": [{
"expressions": [
"value > 700",
"value > 500",
"value > 300"
],
"styles": [
{
"shapeName": "uparrow",
"shapeColor": "#ff0000"
}, {
"shapeColor": "#0000ff"
}, {
"shapeColor": "#008800"
}
]
}],
...
}
If expressions have been set as an array, the grid will create DynamicStyleCase object rather than DynamicStyle. If there is a determination which returns true among those specified as expressions, DynamicStyleCase will specify the corresponding styles to that determination and will not proceed any more.