Enable full row highlight on Kendo grids with locked columns

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;
  
  hoverClass = 'hover';
  selectorContent = '.k-grid-content';
  selectorLocked = '.k-grid-content-locked';
  
  // get the row targeted, and its index
  $initialTarget = $(event.currentTarget);
  rowIndex = $initialTarget.closest('tr').index();
  
  // look for the row in the corresponding table
  $correspondingTable = $($initialTarget.closest('div').is(selectorLocked) ? selectorContent : selectorLocked);
  $correspondingRow = $correspondingTable.find('tr').eq(rowIndex);

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