TreeGrid Cells Tutorial
7. Conditional formatting and styling
TreeGrid can calculate cell's look according to its value or any other condition
Remember, when you specify Formula for cell attribute like Class, Color or Icon, you must add it to the row CalcOrder list, otherwise it will be ignored.
To add CalcOrder to all rows, set it to the <D Name='R'/>. Remember, when you set CalcOrder attribute, you must list here also all calculated cells.
For example <Def><D Name='R' CalcOrder='Col1Class,Col3,Col3Color,Col5'/></Def> when set <C Name='Col1' ClassFormula='...'/><C Name='Col3' Formula='...' ColorFormula='...'/><C Name='Col5' Formula='...'/>.
All the ...Formula attributes can be set also to individual cells, not only to whole columns. In this case the row must have set Calculated='1'.
The conditional formatting can be used also for any other cell Type like Date, Enum or Text, not only numbers.
The Format, Color and Class attributes can be calculated also in API events OnGetFormat, OnGetColor and OnGetClass.
-
Format
attribute (for Int and Float Type only). The simplest way, you can specify three different formats, for positive values, negative values and zero.
Empty value can be specified independently by EmptyValue attribute.
By Format you can specify the count of digits, count of decimal places, group separator and also any HTML code to set font, text color, etc.
-
Calculated
Class
attribute. You can set ClassFormula to calculate the cell class name according to any condition.
For example to assign different class to value between -3 and 3. The CSS classes are defined inside HTML page.
By the Class you can specify font, text color and other text attributes. The Class should not set background color, see Color attribute below.
-
Calculated
Color
attribute. You can set ColorFormula to calculate the cell background color according to any condition.
You can also calculate the individual RGB parts of the color from the cell value to achieve color scale according to the values.
For example Col1Color="Value+',0,0'" displays scale in red color. Remember, the RGB parts must be in range 0-255, otherwise the color will be completely different.
-
Calculated
Icon
attribute. You can set IconFormula to calculate left side icon according to any condition. The icon can be clickable to run some action (correction) on click.
-
Calculated
HtmlPrefix
and / or HtmlPostfix. You can set HtmlPrefixFormula to append before the cell value any HTML code calculated according to any condition.
By the HtmlPrefix you can show for example the gauge according to the cell value.