Grid row hover effect?

Thread is closed for posting
16 posts, 0 answers
  1. T
    T avatar
    15 posts
    Member since:
    Feb 2012

    Posted 02 Apr 2012 Link to this post

    How can I turn on (or create) a subtle hover highlight for rows when my grid is row-selectable?  

    This should be a built-in feature since such an effect should look good within the chosen theme.  

    If it's not, can you suggest some CSS and what class to apply it to that would use theme-friendly hover highlighting?
  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 02 Apr 2012 Link to this post

    Hi,

    You can use:

    .k-grid > table > tbody > tr:hover,
    .k-grid-content > table > tbody > tr:hover
    {
            background: ........ ;
    }

    The two selectors are for Grids without scrolling and with scrolling, respectively.

    For a theme-friendly look, you can use Javascript and apply the k-state-hover CSS class to the currently hovered row.

    Kind regards,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Vince
    Vince avatar
    2 posts
    Member since:
    Apr 2012

    Posted 02 Apr 2012 Link to this post

    It's more complicated then this.  It needs to be able to update/render each cell, since the hover style could conflict with the font, etc.
    What is needed is to have another row.state for "hover", along with css etc to go with it.
    Thanks
  5. T
    T avatar
    15 posts
    Member since:
    Feb 2012

    Posted 02 Apr 2012 Link to this post

    I implemented this with javascript but it fails after the grid is sorted.  What's the best way to handle that?

        addExtraStylingToGrid = function() {
            // add row hilighting on hover and make sure to remove it on click
            $(rowQueryString).hover(
                function () {
                    $(this).addClass('k-state-hover');
                },
                function () {
                    $(this).removeClass('k-state-hover');
                }
            );
            $(rowQueryString).click(
                function () {
                    $(this).removeClass('k-state-hover');
                }
            );
        }

  6. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 03 Apr 2012 Link to this post

    Hello,

    You need to execute the script in the dataBound event handler, i.e. after sorting, paging, etc. This is because the row DOM elements are replaced in these cases.

    Kind regards,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. T
    T avatar
    15 posts
    Member since:
    Feb 2012

    Posted 03 Apr 2012 Link to this post

    So far dataBound works great, thanks!
  8. Vince
    Vince avatar
    2 posts
    Member since:
    Apr 2012

    Posted 03 Apr 2012 Link to this post

    Can you post your code.  Thanks
  9. T
    T avatar
    15 posts
    Member since:
    Feb 2012

    Posted 03 Apr 2012 Link to this post

    It's the "addExtraStylingToGrid()" code I posted above.  The missing element is to add

       dataBound:addExtraStylingToGrid

    in the grid configuration options.

  10. whibs
    whibs avatar
    1 posts
    Member since:
    Sep 2012

    Posted 08 Sep 2012 Link to this post

    Here's a working demo if you'd like to check it out:
    http://jsbin.com/ezovaw/2/edit 
  11. Lee
    Lee avatar
    37 posts
    Member since:
    Oct 2012

    Posted 20 Nov 2012 Link to this post

    In this referenced JSBin example the row selection style and the row hover style are both showing up as gradients....I am only able to get the solid color to appear.....What am I missing?
  12. Lee
    Lee avatar
    37 posts
    Member since:
    Oct 2012

    Posted 20 Nov 2012 Link to this post

    It is the public, static style sheets that are different than the ones I have from my purchase....
  13. Andrew
    Andrew avatar
    171 posts
    Member since:
    Jun 2009

    Posted 20 Jun 2013 Link to this post

    I think the problem here is the version of KendoUI
    I tried the code with the latest kendoui release and jquery 1.9.1 and it does not work at all.

    http://fiddle.jshell.net/zawisza/47J8M/
  14. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 21 Jun 2013 Link to this post

    Hi Andrew,

    The following expression

    $("table.k-focusable tbody tr")

    does not return anything, because the Grid table does not have a k-focusable class.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  15. Andrew
    Andrew avatar
    171 posts
    Member since:
    Jun 2009

    Posted 21 Jun 2013 Link to this post

    Dimo,
    Is there a replacement?
    How would one do this with the current version?
  16. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 21 Jun 2013 Link to this post

    Hello Andrew,


    Inspecting the Grid HTML reveals that the widget wrapper (the table's parent <div>) always has a k-grid class applied, so you can use that element in the selector.

    $(".k-grid > table > tbody > tr")


    Note that <div class="k-widget k-grid"> is a direct parent of the Grid table only when scrolling is disabled. If scrolling is enabled, the table's parent is different.
     

    $(".k-grid-content > table > tbody > tr")

     

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  17. Andrew
    Andrew avatar
    171 posts
    Member since:
    Jun 2009

    Posted 21 Jun 2013 Link to this post

    Thanks. That works perfectly. 
Back to Top
Kendo UI is VS 2017 Ready