Enable full row highlight on Kendo grids with locked columns (excludes grid headers)

kendo-grid-highlight-locked-rows.js

// About:  By default, a Kendo grid with locked column(s) will only highlight a row on hover in either the scrollable
//         columns, or locked columns; not both. Placing this binding in the $kGrid.dataBound() event will enable
//         highlighting the entire row at once.
// Author: Zak MacDonald <http://github.com/zakmac>
// JSBin:  http://jsbin.com/qenehifoli/edit?js,output
// Note:   Since dataBound can be invoked multiple times, we unbind with $.off() before binding with $.on(), for better
//         or worse; You may also want to unbind in the $kGrid.remove() event.

$('#my-k-grid').off('mouseenter mouseleave').on('mouseenter mouseleave', 'tr', function(event) {
  
  var $correspondingRow,
      $correspondingTable,
      hoverClass,
      $initialTarget,
      rowIndex,
      selectorContent,
      selectorLocked,
      selectorContentHeader,
      selectorLockedHeader;
  
  hoverClass = 'hover';
  selectorContent = '.k-grid-content';
  selectorLocked = '.k-grid-content-locked';
  selectorContentHeader = '.k-grid-header-wrap';
  selectorLockedHeader = '.k-grid-header-locked';
  
  // get the row targeted, and its index
  $initialTarget = $(event.currentTarget);
  rowIndex = $initialTarget.closest('tr').index();
  
  // look for the row in the corresponding table
  var container = $initialTarget.closest('div');
  if (container.is(selectorContentHeader) || container.is(selectorLockedHeader)) {
      // but avoid headers
      return;
  }
  $correspondingTable = $($initialTarget.closest('div').is(selectorLocked) ? selectorContent : selectorLocked);
  $correspondingRow = $correspondingTable.find('tr').eq(rowIndex);

  // toggle hover style
  $correspondingRow.toggleClass(hoverClass);
});