We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Change row hover color RowBound Event AddClass Grid

Hello,

I have a row bound event to change the background color of a row but I would also like to change the hover color of that row. So I would like the hover color to also be gray Just for this row, instead of the default.

private void RowBound(RowDataBoundEventArgs<Model> arg)
{
if (mode1)
{
if (arg.Data.Grey)
{
arg.Row.AddClass(new string[] { "grayed" });
}
}

}

.grayed {
background-color: gray;
}

3 Replies

PS Prathap Senthil Syncfusion Team October 6, 2022 11:48 AM

Hi Pavel,


Greetings from Syncfusion support.


Query: I would also like to change the hover color of that row”


We have analyzed your query and suggest you use a customized CSS class to meet your requirements. Kindly refer to the attached image and sample for your reference.


<style>

    .grayed{

        background-color:gray;

    }

   .e-grid .e-gridcontent .grayed:hover .e-rowcell{

        background-color:green !important;

   }

</style>


Please refer to the attached image. The row color was changed after hovering.

Graphical user interface

Description automatically generated with medium confidence


Kindly get back to us if you have any further queries.



Regards,

Prathap S


Attachment: BlazorApp1_c8a9000.zip


PA Pavel October 7, 2022 02:28 PM

Great that worked, thank you!

One more question,

When I click on the grey row, the color switches back to the the default white. 

Is there a way to keep the row grey even after a click on the row?



PS Prathap Senthil Syncfusion Team October 10, 2022 07:52 AM

Hi Pavel,

   Welcome from Syncfusion support.

Query: When I click on the grey row, the color switches back to the default white. Is there a way to keep the row grey even after a click on the row?”
Yes, it is possible. Based on your query, we suggest you use a customizable CSS class to meet your requirements. Kindly refer to the code snippet and sample for your reference.

    /*.grayed{

        background-color:gray;

    }*/

    .e-grid .e-gridcontent .grayed .e-rowcell {

      background-color:gray;

    }

   .e-grid .e-gridcontent .grayed:hover .e-rowcell{

        background-color:green !important;

   }


If we misunderstood your requirement, kindly share more details about your requirement. it will be very helpful in providing the solution as early as possible.

Regards,

Prathap s


Loader.
Live Chat Icon For mobile
Up arrow icon