How to change the background color of a row in flexgrid from Typescript?

How to change the background color of a row in flexgrid from Typescript?

Posted by: rakesh.thummanapelly on 22 November 2022, 12:47 am EST

• 

  rakesh.thummanapelly

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 22 November 2022, 12:47 am EST

  How to change the background color of a row in flexgrid from Typescript ?

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 22 November 2022, 3:33 pm EST

  Hi,

  You can handle the ‘formatItem’ event of the flexGrid, to change the color of the cells in the rows.
  
  You can refer to the following sample, where color of alternate row is changed - https://stackblitz.com/edit/typescript-msdmzv?file=index.ts

  Regards

• 

  rakesh.thummanapelly

  • Post Options:
  • Link
    Copy

  Posted 22 November 2022, 3:48 pm EST

  Thank you for the response.

  I have few disabled cells (read only) in the row. The color should not apply to it.

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 23 November 2022, 7:46 pm EST

  Hi,

  To avoid this problem, you can add an extra condition in the ‘formatItem’ event handler to check if the cell is disabled or not, and apply the color accordingly.
  
  Please refer to the following updated sample for the same - https://stackblitz.com/edit/typescript-msdmzv?file=style.css

  Regards

• 

  rakesh.thummanapelly

  • Post Options:
  • Link
    Copy

  Posted 28 November 2022, 10:32 pm EST - Updated 28 November 2022, 10:41 pm EST

  e.cell.style.backgroundColor = ‘lightgreen’;

  not recognizing ‘style’
  
  throwing error

  Also do you aware of a property like colorAsSuccess and colorAsWarning
  
  we are using them to set the color.

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 29 November 2022, 4:05 pm EST

  Hi,

  Sorry, we are unable to replicate your issue on our end, as there is no such error on our side. Can you please share with us a sample replicating your issue, on which we can investigate and assist you accordingly?

  Sorry but we aren’t aware of colorAsSuccess and colorAsWarning properties, can you provide some more information about colorAsSuccess and colorAsWarning properties, where you want to use them, and what functionality you want to achieve?

  Regards

• 

  rakesh.thummanapelly

  • Post Options:
  • Link
    Copy

  Posted 29 November 2022, 7:17 pm EST

  Hi

  It is working fine now. Thanks for the help.

  And sorry the properties I was mentioning are just a flags created in our project.