how can I keep the existing custom cell background color when a row is hovered?

[Yong Ho (Jake)]

Hi, 

how can I keep the existing custom cell background color when a row is hovered?

I want keep 51672 background color even on row hovered.

Any solution for this?  

Thanks in advance.

[Sanjay Kumar Suresh]

Hi Yong Ho (Jake),

To maintain a custom cell background color in the Syncfusion Blazor Grid even when the row is hovered or selected, you need to use CSS with the !important rule to override the default hover behavior.

Here's how you can achieve this:

Code Snippet:

<style>

 

    .green-highlight {

        background-color: #d4edda; /* Light green */

        color: #155724;            /* Dark green text for contrast */

    }

 

    /* Selection styling: Change background color for selected rows with 'green-highlight' */

    .e-grid .e-gridcontent .e-content .e-row.green-highlight .e-rowcell.e-selectionbackground {

        background-color: #d4edda !important; /* Apply desired color to selected rows */

    }

 

    /* Row hover styling: Change background color when hovering over rows with 'green-highlight' */

    .e-grid .e-gridcontent .e-content .e-row.green-highlight:hover .e-rowcell {

        background-color: #d4edda !important; /* Apply desired color on hover */

    }

 

</style>

 

….

private void OnRowDataBound(RowDataBoundEventArgs<JobDto> args)

  {

      var totalRows = Jobs.Count;

      var currentIndex = Jobs.IndexOf(args.Data);

      string[] classname = { "green-highlight” };

 

      if (currentIndex >= totalRows - 3)

      {

          args.Row.AddClass(classname);

      }

  }

Sample:

https://blazorplayground.syncfusion.com/embed/LZhSXuBrLxSgZJOH?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

Please refer the above sample for more information. Feel free to get back to us if you have any questions.

Regards,

Sanjay Kumar Suresh

[Yong Ho (Jake)]

Hi  Sanjay,

Thank you for your reply.

Solved. It was a great help.

    .green-color {
        background-color: limegreen;
    }


    /* Row hover styling: Change background color when hovering over rows with 'green-color' */
    .e-grid .e-gridcontent .e-content .e-rowcell.green-color {
        background-color: limegreen !important; /* Apply desired color on hover */
    }

Thanks,

Yong

[Sanjay Kumar Suresh]

Hi Yong Ho (Jake),

We are happy to hear that the provided solution was helpful. Please get back to us if you need any other assistance.

Regards,

Sanjay Kumar Suresh