Change color of selected row on button click in wijmo grid

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

  • 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.
  • Replied 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
  • Replied 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
  • Replied 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
  • Replied 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
  • Replied 13 June 2021, 3:25 pm EST

    Hi Ashwin,

    Can you please help me with the solution.

    Thank you.
  • Replied 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
Need extra support?

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

Learn More

Forum Channels