Datagrid : change background color on row click

Radzen.Blazor Components
1

Hello,

Is there a way to change the background color of a row when click on it?

Best Regards,
Jérôme.

2

Hi @Jerome,

Usually selecting row will do that - you need to either subscribe to RowSelect event or two-way bind Value property of the DataGrid. Is your case different?

3

Hi @enchev,

Thanks for your reply, that works!

Another question, how can I change the default color of the selected row and the hover color? Do I have to override the css?

Any example would be much more appreciated.

Best Regards,
Jérôme.

4

Yes the best way will be to extend rz-state-highlight CSS class

5

Thanks again @enchev ! I tried to change the background color with the rz-state-highlight css class but unfortunately nothing changed.

I put that code directly in the page containing the grid. The font size is properly updated but not the background color. Any idea or example?

<style>
    .rz-datatable-data td .rz-cell-data {
        font-size: 0.7em;
    }
    
     .rz-state-highlight {
          background-color: chocolate;
      }
  
   </style>

Best Regards,
Jérôme.

6

Hi @Jerome,

You can change the selector to set the td background-color.

7

Hi @enchev,

You mean like this?

.rz-state-highlight td{
         
          background-color: chocolate;
    
 }

No change....

Best Regards,

8

Hi @enchev,

You mean like this?

.rz-state-highlight td{
         
          background-color: chocolate;
    
 }

No change....

Best Regards,

9

You might need to use !important. You can inspect what’s applied using your browser inspector

10

Hi @enchev,

Yes, that works, thanks for your help!

Here are the classes to override for the selection and the hover, may be it can help someone.

/** For highlight when you click on a row. **/
.rz-state-highlight td{
 background-color: #YOUR-COLOR !important;
}

/** For hower  **/
.rz-selectable .rz-datatable-even:hover:not(.rz-state-highlight) > td,
.rz-selectable .rz-datatable-odd:hover:not(.rz-state-highlight) > td {
  background-color: #YOUR-COLOR !important;
}

/** Color of text when hover **/    
.rz-selectable .rz-datatable-even:hover:not(.rz-state-highlight) .rz-cell-data,
 .rz-selectable .rz-datatable-odd:hover:not(.rz-state-highlight) .rz-cell-data {
  color: #YOUR-COLOR !important; 
}

Best Regards,
Jérôme.

4 Likes