Change color of aggregate row text

Change color of aggregate row text

Posted by: pedro.oliveira on 8 June 2021, 2:14 am EST

• 

  pedro.oliveira

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  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!

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  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

• 

  pedro.oliveira

  • Post Options:
  • Link
    Copy

  Posted 9 June 2021, 12:32 am EST

  Thanks!