shahar eldad
shahar eldad

Reputation: 862

telerik asp.net mvc grid - how to style selected row on hover

I tried a lot of question and answers here and on telerik forums but none worked from some reason. I have a grid which I want to style as I wish and some things I managed, but I failed with setting the selected row hover background-color.

any idea?

here is the grid:

@(Html.Kendo().Grid < APDashboard.Models.OrderViewModel > ()
    .Name("grid")
    .Columns(columns => {
        columns.Bound(p => p.Freight).Title("מספר ספינה");
        columns.Bound(p => p.OrderDate).Title("תאריך הזמנה").Format("{0:MM/dd/yyyy}");
        columns.Bound(p => p.ShipName).Title("שם משלוח");
        columns.Bound(p => p.ShipCity).Title("עיר משלוח");
    })
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .ClientDetailTemplateId("template")
    .HtmlAttributes(new {
        style = "height:550px;"
    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Read(read => read.Action("Orders_Read", "Grid"))
    )
    .Events(events => events.DataBound("dataBound"))
)

And here are my stylings:

I marked below what I tried for the hover

.k-i-expand:before{
    content: "\e007"
}
.k-i-collapse:before{
    content: "\e002"
}

.k-grid{
    font-family: Arial;
    font-size: 13px;
}
.k-grid td{
    color: #1e1e1e;
}
.k-grid tr:hover{
    background-color: #e0f3f7;
}
.k-grid-header .k-header{
    background-color: #d8dcdf;
}
.k-grid-header .k-header .k-link{
    color: #1e1e1e;
}
.k-grid .k-state-selected{
    background-color: #bce8f3 !important;
}

/* ================================== */
/* Here is what I tried for the hover */
/* ================================== */
.k-grid .k-state-selected:hover {
    background-color: #bce8f3 !important;
}

Upvotes: 0

Views: 685

Answers (1)

Sam Zakhezin
Sam Zakhezin

Reputation: 376

Works fine for me.

.k-state-selected:hover td { background-color: red !important; }

Upvotes: 1

Related Questions