How to customize the background color of selected of a Kendo UI Grid row

Question

I am a Kendo UI newbie. In my Asp.Net MVC application I use Kendo UI Grid widget and and configure that Grid so user can select a Grid row like:

$("#gridSurvey").kendoGrid({
                dataSource: {
                    type: "json",
                    transport: {
                        read: {
                            url: "/MyController/GetItemList",  

                            ...
                selectable: "row",
                change: function(e)
                {
                    var entityGrid = $("#gridItems").data("kendoGrid");
                    _selectedItem = entityGrid.dataItem(entityGrid.select());

                },
                ...

By default, when user clicks on a row, the selected row of the selected Grid row is high-lighted with some built-in color. How can I customize/change that background color of that selected row to transparent or some other color? I prefer transparent background color. Please help. Thank you in advance.

CSharper · Accepted Answer · 2014-10-14T18:21:07.063

15

.k-grid .k-state-selected { background: blue; }

edited Oct 14 '14 at 18:21

answered Feb 18 '14 at 14:45

CSharper

5,420
6
28
54

1

for selected row hover color, use this `.k-grid table tr:hover td` – xinthose May 03 '16 at 14:35
encapsulation: ViewEncapsulation.None, I was missing this step to get reflect. Please check https://stackoverflow.com/questions/45547163/changing-the-color-of-onclick-selected-text-in-kendo-angular-grid – Chandy Kunhu Mar 05 '19 at 14:05

score 2 · Answer 2 · answered Aug 30 '16 at 20:55

2

.k-grid td.k-state-selected:hover, .k-grid tr:hover {
    color: #fff;
    background-color: darkslategray;
}

answered Aug 30 '16 at 20:55

Gail Foad

623
10
22

1

With current Telerik UI in a .NET Core MVC project, this one worked for me. The accepted answer did not. – John81 Mar 21 '18 at 14:08

How to customize the background color of selected of a Kendo UI Grid row

2 Answers2