Removing selected row color change css style

[habeeb]

 

I am using Kendo UI Grid

@(Html.Kendo().Grid<SomeViewModel>()
 .Name("SomeGrid")
 .Columns(columns =>
 {
        columns.Bound(p => p.Id);
 })
 .Events(e => e.DataBound("onDataBound"))
 .Selectable(selectable => selectable.Enabled(true).Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
    .Scrollable()
 .Filterable()
    .DataSource(dataSource => dataSource
 .Ajax()
 .Read(...)
 )
 )

When the row is selected the color changes to orange. How do I remove the css style performing this color change. In other words when row is selected I don't want any color changing.

 

 

 

[habeeb]

This fixed it.

 

.k-grid .k-state-selected {
    background-color: #ffffff !important;
    color: #000000;
}

.k-grid .k-alt.k-state-selected {
    background-color: #f1f1f1 !important;
    color: #000000;
}

[habeeb]

 

.k-grid .k-state-selected {
    background-color: #ffffff !important;
    color: #000000;
}

.k-grid .k-alt.k-state-selected {
    background-color: #f1f1f1 !important;
    color: #000000;
}

[Daniel]

Hello Habeeb,

Instead of using important clause (not recommended) I would suggest that you use a selector with a higher specificity. For example:

<style type="text/css">
    div.k-grid .k-selectable tr.k-state-selected {
        background-color: #ff6a00;
    }
</style>

Regards,
Daniel
Telerik