Posted 8 June 2021, 2:14 am EST
Hello,
I need to change a color of aggregate row text using one condition!
For exemple:
If(value > 0) {
color: red;
} else {
color: green;
}
Does anyone have an example on Vue?
Thanks!
Forums Home / Wijmo / General Discussion
Posted by: pedro.oliveira on 8 June 2021, 2:14 am EST
Posted 8 June 2021, 2:14 am EST
Hello,
I need to change a color of aggregate row text using one condition!
For exemple:
If(value > 0) {
color: red;
} else {
color: green;
}
Does anyone have an example on Vue?
Thanks!
Posted 8 June 2021, 11:14 pm EST
Hi Pedro,
You can use vue’s cell template directive to customize the look and feel of the aggregate row. Please refer to the sample and the documentation link below:
Sample: https://codesandbox.io/s/restless-moon-bzqqo
Docs: https://www.grapecity.com/wijmo/api/modules/wijmo_vue2_grid.html#wjflexgridcelltemplate
You can also achieve this by handling the formatItem event:
<wj-flex-grid :formatItem="onFormatItem"></wj-flex-grid>
onFormatItem(s, e) => {
if (e.panel == s.columnFooters) {
if (parseFloat(e.cell.textContent.replace(",", "")) > 40000) {
e.cell.style.color = 'red'
} else {
e.cell.style.color = 'green'
}
}
}
Regards,
Ashwin
Posted 9 June 2021, 12:32 am EST
Thanks!