When a grid has locked column and row selection turned on, the hover state for a row only works for one half of the grid. Is there a way for the hover state to span both sides of the grid?
1 Answer, 1 is accepted
answered on 30 Nov 2018, 10:53 AM
The described behavior is actually expected, as the Grid locked/frozen functionality relies on rendering two separate tables for holding the "locked" non-scrollable and the scrollable parts of the Grid respectively. Thus all Grid rows are actually represented by two separate DOM elements - one TR element in the locked section's table and one TR element in the scrollable table, and there is no way hovering one of these elements to lead to hovering its counterpart out-of-the-box.
You can achieve the desired behavior via some custom implementation, based on querying the DOM and attaching mouseenter and mouseleave handlers to all needed TR elements that will add and remove the .k-state-hovered class to/from the corresponding row in the other table. Here is a sample implementation of the described approach:
The example can be further optimized by adding a cross-browser solution for the closest() method that is not supported in IE, and also converting the querySelectorAll() result to a regular Array as the foreach() method would not be supported in all browsers otherwise. Unsubscribing from custom added handlers in the OnDestroy() lifecycle hook would also be the prudent thing to do to avoid memory leaks.
I hope this helps.
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers.Learn More.