New to Kendo UI for jQuery? Download free 30-day trial

Disable Hover Row Style


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


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


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);


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

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

    <div id="example">
      <div id="grid"></div>
        $(document).ready(function () {
            dataSource: {
              type: "odata",
              transport: {
                read: ""
              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
In this article