How to remove Blazor DataGrid Hover background colour

1 Answer 43 Views
Grid Styling
CJ
Top achievements
Rank 2
Iron
CJ asked on 23 Mar 2025, 11:02 PM

I have a Blazor DataGrid with three Locked columns. Those locked columns are coming with alternative background  colour on hover. How can I remove that?

I removed background colours as follows

/*Remove alternative row background color for sticky columns on Rows*/
.tgrid-remove-alt-color-sticky-columns-rows .k-master-row.k-table-alt-row .k-grid-content-sticky,
.tgrid-remove-alt-color-sticky-columns-rows .k-master-row.k-table-alt-row.k-grid-row-sticky > .k-table-td,
.tgrid-remove-alt-color-sticky-columns-rows .k-master-row.k-table-alt-row .k-grid-row-sticky {
    background-color: white !important;
}

Tried following to remove the hover background colour, but not luck.

 

.tgrid-remove-alt-color-sticky-columns-rows .k-master-row.k-table-alt-row .k-grid-content-sticky,
.tgrid-remove-alt-color-sticky-columns-rows .k-master-row.k-table-alt-row.k-grid-row-sticky > .k-table-td,
.tgrid-remove-alt-color-sticky-columns-rows .k-master-row.k-table-alt-row .k-grid-row-sticky,
.tgrid-remove-alt-color-sticky-columns-rows .k-master-row.k-table-alt-row .k-grid-content-sticky:hover,
.tgrid-remove-alt-color-sticky-columns-rows .k-master-row.k-table-alt-row.k-grid-row-sticky > .k-table-td:hover,
.tgrid-remove-alt-color-sticky-columns-rows .k-master-row.k-table-alt-row .k-grid-row-sticky:hover {
    background-color: white !important;
}

1 Answer, 1 is accepted

Sort by
0
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
answered on 27 Mar 2025, 07:50 PM
What about the following CSS:

<style>
    .k-master-row:hover .k-grid-content-sticky, 
    .k-master-row:hover .k-grid-row-sticky, 
    .k-master-row:hover .k-grid-row-sticky>.k-table-td, 
    .k-master-row.k-hover .k-grid-content-sticky, 
    .k-master-row.k-hover .k-grid-row-sticky, 
    .k-master-row.k-hover .k-grid-row-sticky>.k-table-td {
        background-color: white !important;
    }
</style>

Reagrds,
Anislav Atanasov
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
commented on 08 Apr 2025, 10:54 AM

Does it work for you?
CJ
Top achievements
Rank 2
Iron
commented on 10 Apr 2025, 06:37 AM

Hi Anislav,
I have 3 sticky columns and a few more non sticky columns in this grid. Your solution cleared the background color of the sticky columns.
Now there is a background color difference in the non-sticky columns. How can I apply the same style for non sticky columns?  Thanks

Tags
Grid Styling
Asked by
CJ
Top achievements
Rank 2
Iron
Answers by
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Share this question
or