Grid disable gray background when row selected and mouse hover

[Baba Goud Gadiga]

Hi team,

My datagrid rows are having different background colors set based on certain conditions using the RowDataBound event.

We would like to make the below change.

1) Disable the gray background when the mouse is hovered and row is selected. Instead we would like to change the font-weight to bold and keep the existing background color of the row as is. For eg: if the background color of the row is green, we would like to keep the row color as green when the user selects this row or hovers on this row and instead make the row data font-weight as bold.

I was able to change the font-weight to bold when the mouse is hovered and row is selected using the below css style, but not able to keep the background color same. The background color of the row is still 

 .e-grid .e-row:hover .e-rowcell{

        font-weight: bold;

    }

    .e-grid .e-rowcell.e-selectionbackground {

        font-weight: bold;

    }

I also tried the RowSelected and OnRecordClick events to see if I can persist the row background color but seems the Args.Row is always null when the row is selected or clicked.

Thanks

Baba

[Sarveswaran Palani]

Hi Baba,

Greetings from Syncfusion support.

We have analyzed your query and suggest you to use important rule in CSS to overcome the reported issue. Kindly refer the attached code snippet for your reference.

<style>

    .e-grid .e-row:hover .e-rowcell{

        font-weight: bold;

        background-color: greenyellow !important;

    }

 

    .e-grid .e-rowcell.e-selectionbackground {

        font-weight: bold;

    }

</style>

Kindly get back to us if you have any further queries

Regards,

Sarveswaran PK

[Baba Goud Gadiga]

Hello Sarveswaran,

Thank you for the update. Your suggestions fixes most part of the issue. When a row is selected the background color of the row is the retained and  text is bolder but when you click the same row again  the bold text is lost, is this an expected b

Thanks,

Baba

[Sarveswaran Palani]

Hi Baba,

We have analyzed your query and we would like to inform you that the text bold is lost when deselecting the row because you have applied that style font text as bold using .e-selectionbackground external CSS class.  This class will be added only when selecting a record.

Kindly get back to us if we misunderstood your query.

Regards,

Sarveswaran PK

[Baba Goud Gadiga]

Hello Sarveswarn,

Thanks for the update. I have one more query regarding this.

I would like to retain the grid row cell color when the mouse is hovered or when the row is selected.

Currently the row selection and hover is working fine.  If you see the below image, few cells in the row are colored based on specific values. Now when I hover or select this row the cell background is changing.

[Sarveswaran Palani]

Hi Baba,

Sorry for the Inconvenience caused.

We are currently Validating the reported query with high priority at our end, and we will update the further details within two working days. Until then we appreciate your patience.

Regards,

Sarveswaran PK

[Sarveswaran Palani]

Hi Baba,

Thanks for contacting Syncfusion support again.

We have analyzed your query and suggest you to use customized CSS class to overcome the reported issue. Kindly refer the attached image and code snippet for your reference.

<style>

    .e-grid .e-gridcontent .e-row:hover .e-rowcell.below-30 {

        background-color: orangered !important;

    }

 

    .e-grid .e-gridcontent .e-row:hover .e-rowcell.below-80 {

        background-color: yellow !important;

    }

 

    .e-grid .e-gridcontent .e-row .e-rowcell.below-30.e-selectionbackground {

        background-color: orangered;

    }

 

    .e-grid .e-gridcontent .e-row .e-rowcell.below-80.e-selectionbackground {

        background-color: yellow;

    }

 

    .below-30 {

        background-color: orangered;

    }

 

    .below-80 {

        background-color: yellow;

    }

</style>

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

Regards,

Sarveswaran PK

Attachment: SfGridCSS_cc95c452.zip

[Baba Goud Gadiga]

Hello Sarveswaran,

The fix works fine. Thanks a ton brother.

Thanks

Baba

[Sarveswaran Palani]

Hi Baba,

Thanks for your update.

We are happy to hear that your issue has been resolved.

Please get back to us if you need further assistance.

Regards,

Sarveswaran PK