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
0
Dimiter Topalov
Telerik team
answered on 30 Nov 2018, 10:53 AM
Hello Jacky,
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.
Regards,
Dimiter Topalov
Progress Telerik
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.
The example pointed us in the right direction, but it does not work if the data is not yet available.
I think it is better to use events that bubble.
So use mouseover and mouseout instead of mouseenter and mouseleave.
You only need two event handlers on the grid, instead of event handlers on each row. and you dont have to query the whole document to find the elements.