This is a migrated thread and some comments may be shown as answers.

Grid locked column hover state

1 Answer 124 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Jacky
Top achievements
Rank 1
Jacky asked on 29 Nov 2018, 10:20 PM
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

Sort by
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:

https://stackblitz.com/edit/angular-id6ho5-8bvfzc?file=app/app.component.ts

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.
Tags
General Discussions
Asked by
Jacky
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Share this question
or