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

Grid locked column hover state

1 Answer 407 Views
Grid
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.
Hendrik
Top achievements
Rank 1
commented on 29 Sep 2023, 10:48 AM | edited

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.

Our code:

        <kendo-grid 
          (mouseover)="handleMouseOver($event)"
          (mouseout)="handleMouseOut($event)"
          ...

  handleMouseOver(event) {
    const tartgetElement = event.target as HTMLElement;
    const row = tartgetElement.closest('tr');
    const grid = tartgetElement.closest('kendo-grid.k-grid');
    if (row && grid) {
      const rowIndex = row.getAttribute("data-kendo-grid-item-index");
      const contentRow = grid.querySelector(`.k-grid-content tr[data-kendo-grid-item-index="${rowIndex}"]`);
      const lockedRow = grid.querySelector(`.k-grid-content-locked tr[data-kendo-grid-item-index="${rowIndex}"]`);
      contentRow?.classList.add('k-hover');
      lockedRow?.classList.add('k-hover');
    }
  }
  
  handleMouseOut(event) {
    const tartgetElement = event.target as HTMLElement;
    const row = tartgetElement.closest('tr');
    const grid = tartgetElement.closest('kendo-grid.k-grid');
    if (row && grid) {
      const rowIndex = row.getAttribute("data-kendo-grid-item-index");
      const contentRow = grid.querySelector(`.k-grid-content tr[data-kendo-grid-item-index="${rowIndex}"]`);
      const lockedRow = grid.querySelector(`.k-grid-content-locked tr[data-kendo-grid-item-index="${rowIndex}"]`);
      contentRow?.classList.remove('k-hover');
      lockedRow?.classList.remove('k-hover');
    }
  }


Tags
Grid
Asked by
Jacky
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Share this question
or