Rollover row buttons with SlickGrid

Question

Using SlickGrid, I'd like to add a delete button to each row. But I'd only like the button to be displayed when the user hovers over the row. A good example of this effect can be seen here:

http://grooveshark.com/#/popular

The "Play" and "Options" buttons only become visible on row mouseover.

The solution I have implemented looks like this:

  $(".slick-row").hover(
    function () {
      $(this).find(".deletelink").css({"visibility": "visible"});          
    },
    function () {
      $(this).find(".deletelink").css({ "visibility": "hidden" });
    }
  );

It works, but is it the easiest/recommended way to do this? I'm new to SlickGrid and I'm still not sure how to interact with the grid when the built in methods don't give me what I need.

Is it a good idea to manipulate the SlickGrid elements e.g. $(".slick-row") using jQuery? Or is there a better way to do this?

EDIT: I have discovered a small problem with my method. When scrolling the grid up and down a couple of screens, the toggle functionality is lost. Presumably because SlickGrid is destroying and recreating the table rows. I may be able to solve this using live events. Again, is this is good solution or is there a better way to approach this sort of problem?

score 2 · Answer 1 · answered May 25 '12 at 18:23

Use this instead

$('.slick-row').live('mouseover mouseout', function (event) {
        if (event.type == 'mouseover') {
            $(this).find(".deletelink").css({"visibility": "visible"}); 
        } else {

             $(this).find(".deletelink").css({ "visibility": "hidden" });
        }
    });

works great here , even after scrolling the grid up and down a couple of times

Rollover row buttons with SlickGrid

1 Answers1