Change color of selected row on button click in wijmo grid

Change color of selected row on button click in wijmo grid

Posted by: srish123ti on 7 June 2021, 8:14 pm EST

• 

  srish123ti

  • Post Options:
  • Link
    Copy

  Posted 7 June 2021, 8:14 pm EST

  Hi ,

  How do i change the text color of selected row on button click.
  
  I was following this article on forum - https://www.grapecity.com/forums/wijmo/row-background-changing

  Snippet of my code -
  
  https://stackblitz.com/edit/angular-j9zdy7?file=src/app/app.component.ts

  Please help me with this issue.

  Thank you.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 9 June 2021, 3:12 pm EST

  Hello Shristi,

  You can achieve this by using the cssClass property of the Row class. You can assign a CSS class to this and this class will be added to all the cells in that particular row. Then you can use CSS to customize the cells. You may refer to the updated sample below:

  https://stackblitz.com/edit/angular-nr8gka

  Regards,
  
  Ashwin

• 

  srish123ti

  • Post Options:
  • Link
    Copy

  Posted 9 June 2021, 3:53 pm EST

  Hi Ashwin,

  On click of delete button it is getting colored but the checkboxes are still checked.
  
  On checking the check boxes i’m selecting the rows but on click of delete button it should color the text of those selected rows as well as un check the checkboxes and the color should persist after unchecking the checkboxes.
  
  It’s basically on click of delete button i want to color those rows. i tried isSelected = false but then the color is also getting removed.

  Regards,
  
  Srishti

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 9 June 2021, 10:54 pm EST

  I have updated the sample as per your requirements:

  https://stackblitz.com/edit/angular-nr8gka

  • Updated the deleteEntry method.
  • Updated styles.css

  ~regards

• 

  srish123ti

  • Post Options:
  • Link
    Copy

  Posted 10 June 2021, 3:51 pm EST

  Hi Ashwin,

  In the snippet, after we delete a row and i try to add a new row or pagination change then the color of the deleted row gets reverted.
  
  Please provide us a solution.

  Regards,
  
  Srishti

• 

  srish123ti

  • Post Options:
  • Link
    Copy

  Posted 13 June 2021, 3:25 pm EST

  Hi Ashwin,

  Can you please help me with the solution.

  Thank you.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 13 June 2021, 5:54 pm EST

  Hi Srishti,

  This happens because whenever the page is changed, then the rows are re-created and their cssClass property is reset. For saving the color while paging, you will need to save the color in the data item of the row and use the loadedRows event to set the color again. Please refer to the sample below for reference:

  https://stackblitz.com/edit/angular-zefb2n

  ~regards