Kendo UI Grid row hover highlight issue with locked columns

3 posts, 0 answers
  1. Ian
    Ian avatar
    12 posts
    Member since:
    Feb 2016

    Posted 08 Mar 2016 Link to this post

    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

  2. Radoslav
    Admin
    Radoslav avatar
    1566 posts

    Posted 10 Mar 2016 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Ian
    Ian avatar
    12 posts
    Member since:
    Feb 2016

    Posted 10 Mar 2016 in reply to Radoslav Link to this post

    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.

Back to Top