Kendo UI Grid row hover highlight issue with locked columns

[Ian]

Hi,

I'm having an issue with the row highlighting on hover when using locked columns. When hovering over a row in the unlocked section of the grid, only the unlocked columns get highlighted. When hovering over a row in the locked section, only the locked sections get highlighted.

I know this is because column locking actually creates two separate grids.

How can I get the entire row (locked and unlocked) to highlight when I'm hovering over a row?

Thanks,

Ian

[Radoslav]

Hi Ian,

Unfortunately the desired functionality is not supported build in, however you can achieve it with some custom code. On the following thread you can find a possible solution for highlight rows on two septate tables:
http://stackoverflow.com/questions/7898430/add-jquery-hover-effect-across-two-tables

I hope this helps.

Regards,
Radoslav
Telerik

 

 

[Ian]

Thank you for pointing me in the right direction. I managed to get the entire row to highlight on hover by adding the following code to the beginning of the dataBound function for my dataSource:

var $trs = $('table.k-selectable tbody tr');
$trs.hover(
    function () {
        var i = $(this).index() +1;
        $trs.filter(':nth-child(' +i + ')').addClass('k-state-hover');
    },
    function () {
        var i = $(this).index() +1;
        $trs.filter(':nth-child(' +i + ')').removeClass('k-state-hover');
    }
);

You can also see the issue posted on StackOverflow here: http://stackoverflow.com/questions/35902267/jquery-need-help-selecting-tr-elements-inside-a-div-element-with-a-specific-clas/35917952#35917952.

[Babu]

I am also facing the same problem on Kendo angular UI grid. 

Problem is that row is not highlighted on the freezed columns as well as other columns.

Can you any one help on this. 

 

Thanks.

[Martin]

Hi Babu,

The described behavior is expected and is a limitation of the Locked columns functionality which indeed relies on rendering separate tables for the locked and non-locked parts. To achieve the desired behavior, a custom implementation based on manually handling DOM events needs to be created. The developer needs to find the corresponding elements from the other table. Then apply the hovered state programmatically.

Here is an example that I prepared to demonstrate a possible implementation and should point the developer in the right direction :

https://stackblitz.com/edit/angular-jbhmaa-o1jr7h

Regards