Search code examples
jquerykendo-griddata-entry

Kendo Grid Selected Row vs. Hover/Mouseover Row

We're using Kendo Grid for data entry and there appears to be two different row selectors, only one of which we are able to turn on/off. The selected row (see #1 black arrow below) can be turned off with "selectable: false". However, another row selector (see #2 red arrow below) appears when we mouseover (i.e. hover over) a different row (see red arrow below). How can we turn the second row selector on/off?

enter image description here

Here's the configuration:

let grid = $("#grid").kendoGrid({
    dataSource: {
        data: rows,
    },
    edit: gridCellEdit,
    editable: {
        createAt: 'bottom'
    },
    filterable: true,
    sortable: true,
    navigatable: true,
    resizable: true,
    reorderable: true,
    scrollable: { virtual: true },
    selectable: "row",
    columns: gridColumns,
    dataBound: monitorKeyboard
});
Solution

  • You can use the following

    .k-grid > table > tbody > tr:hover,
.k-grid-content > table > tbody > tr:hover
{
     background: inherit !important;
}

    here a working demo

    hope it will help