Reputation: 862
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
Reputation: 376
Works fine for me.
.k-state-selected:hover td { background-color: red !important; }
Upvotes: 1