Forked from zakmac/kendo-grid-highlight-locked-rows.js
Last active
January 12, 2021 07:43
-
-
Save sirudog/0d29e6cc02c5704464e0b1d38f5282ea to your computer and use it in GitHub Desktop.
Enable full row highlight on Kendo grids with locked columns (excludes grid headers)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment