Selected Row Change CSS for Wijmo Grid

Posted by: kapil.r.shah on 26 March 2020, 4:07 am EST

  • Posted 26 March 2020, 4:07 am EST

    How do I set the selected row with background color change to another color (example pink) .The cell background remains the original color of the cell. I have tried:

    wj-cells .wj-cell.wj-state-multi-selected {
    background: pink!important;
    color: white;

    How do I change the default background blue color .?

    One of the column Activity has hyper links and the background blue color does not distinguish the hyperlink properly


  • Replied 26 March 2020, 7:17 pm EST

    Hi Kapil,

    Your CSS is correct but in your CSS selector, there is dot (.) before wj-cells. This may be causing the issue.

    Also, you need to place this CSS in your global stylesheet, generally styles.css in Angular or else it won't work.

    Refer to the sample link below for reference:

  • Replied 27 March 2020, 3:17 am EST

    Thanks Ashwin,
    I implemented your suggestions above. I am able to change the background color. But I have one issue. Please see screen shot.

    The text of the other columns shows white. I changed the css to show as black. But its not picking up the black color from my global css file. It shows the white color from Wijmo node module _nav.scss

    .It is not being overwritten by my global css . How do I overwrite the white color.


    .wj-cells .wj-cell.wj-state-selected {
    background: #C2E0FF !important;
    color: black;

  • Replied 27 March 2020, 3:17 am EST

  • Marked as Answer

    Replied 29 March 2020, 2:31 pm EST

    Hi Kapil,

    Just add the !important clause to the color property in your CSS:

    .wj-cells .wj-cell.wj-state-selected {
    background: #C2E0FF !important;
    color: black !important;

  • Replied 30 March 2020, 11:23 pm EST

    Thanks Ashwin,
    It worked
Need extra support?

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

Learn More

Forum Channels