Disable Hover Row Style

Environment

Product Version	2019.3.1023
Product	Progress® Kendo UI® Grid for jQuery

Description

How can I disable the hover styles for the row and alt rows for my Kendo UI Grid?

Solution

To configure the Kendo UI Grid rows to not have a different style upon hovering, set the background color. The .k-alt background-color will need to be changed specifically based on the used theme. In this instance, it is using Bootstrap:

    html .k-grid tr:hover {
      background: transparent;
    }

    html .k-grid tr.k-alt:hover {
      background: rgba(33,37,41,.03);
    }

Example

     <style>
      html .k-grid tr:hover {
        background: transparent;
      }

      html .k-grid tr.k-alt:hover {
        /*Silver Theme*/
        background: #fbfbfb;
      }
    </style>

    <div id="example">
      <div id="grid"></div>
      <script>
        $(document).ready(function () {
          $("#grid").kendoGrid({
            dataSource: {
              type: "odata",
              transport: {
                read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
              },
              pageSize: 20
            },
            height: 550,
            groupable: true,
            sortable: true,
            pageable: {
              refresh: true,
              pageSizes: true,
              buttonCount: 5
            },
            columns: [{
              template: "<div class='customer-name'>#: ContactName #</div>",
              field: "ContactName",
              title: "Contact Name",
              width: 240
            }, {
              field: "ContactTitle",
              title: "Contact Title"
            }, {
              field: "CompanyName",
              title: "Company Name"
            }, {
              field: "Country",
              width: 150
            }]
          });
        });
      </script>
    </div>