change selected row color in datagrid

1
styleDear All if i want change the selected row color ,and i don’t want change the custom-variables.scss. I only want to set selected row color in the datagrid’s  style.  
asked
3 answers
1

Hej all,

 

what would be the css code to make the selected row in color ? 

i tried some codes like : 

.highlightRow{
    .mx-grid tr.selected{
        background-color: #FFFFFF ; 
    }
}

but it doesnt work. 

Thanks in Advice :-)

answered
8

Hi LIU FENG,

Please add the below styling in your main.scss file

.datagrid-striped .mx-grid-content >table >tbody tr.selected td {
  background: #2A5283 0% 0% no-repeat padding-box !important;
  color: #FFF !important;
}

Then update your datagrid class properties with datagrid-striped

This should work.

 

Thanks!

answered
2

Hi Liu,

AFAIK, you can’t set the selected row color using the style property of the datagrid. Note this is also not a good practice as over a period of time, maintaining your application styling will become difficult.

You would have to modify the scss files for this. If you prefer to do this only for a certain datagrid then you could create a custom class, assign this to your datagrid and style the selected row to set to desired color.

However, generally speaking to maintain user experience this is usually done for the entire application. And you could do that by changing the custom-variable.scss file.

Goodluck!

answered