Locked Column Hover Not Highlighting Entire Row

[Scott Michetti]

Hello,

I have a locked column. When I mouse over a cell in the locked area of the grid only the cells in the locked column are highlighted. I would like the whole row, including the area that is not locked highlighted. Can this be done with styling? Is there an event I can use to make this happen in code?

 

Thanks,

Scott

[Martin]

Hi Scott,

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.

However, we can achieve the desired behavior using 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 an implementation of the described approach:

https://stackblitz.com/edit/angular-zozwut?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,
Martin
Progress Telerik

[Scott Michetti]

Thank you Martin. Is there a way to get this to work with a virtual scroll? This does not work when using virtual scrolling.

 

Thanks,

Scott

[Scott Michetti]

I think I figured it out. If you place 

const index = row.getAttribute("data-kendo-grid-item-index");

below

row.addEventListener("mouseenter", () => {

it works.

Maybe you have a better solution, but this is working for me. I call CustomFunction on load and then in the pageChange event. I also track the addEventListener calls in an array, and then call removeEventListener when I call CustomFunction.

 

Thanks,

Scott

[Martin]

Hi Scott,

I am glad to hear that you have managed to resolve the issue.

Another approach that could be overtaken is to invoke the customFunction in а setTimeout in the pageChange event handler:

 public pageChange(event: PageChangeEvent): void {
    this.skip = event.skip;
    this.loadProducts();
    setTimeout(() => {
      this.customFunction();
    });
  }

Updated example:

https://stackblitz.com/edit/angular-js1ecx-yylmvj?file=app/app.component.ts

I would like to add that using the data-kendo-grid-item-index attribute is not documented for public use and thus could be changed or removed in a future release of the Grid.

There is also a logged bug report in our public GitHub repository, related to the discussed topic, that can be tracked at the following link:

https://github.com/telerik/kendo-angular/issues/2189 

I hope this provides some more details. Let me know if any further assistance is required for this case or any other Kendo UI for Angular related topic.

Regards,
Martin
Progress Telerik