Change color of aggregate row text

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!
  • Marked as Answer

    Replied 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
  • Replied 9 June 2021, 12:32 am EST

    Thanks!
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels