SlickGrid change Row background color on rollover

I'm using version 2.0a of SlickGrid for the groupings capability. Everything works great (with lots of customization). I'm trying to change the background-color for ENTIRE ROW on rollover event.

I've tried this:

.slick-row { background-color:#dee0fe; } 

and this:

.slick-row.ui-state-active { background:#dee0fe; }

This works on individual cells:

.lr:hover { background: #dee0fe; }

but nothing seems to wo开发者_如何学Crk on the entire row and I've never seen an example of this. I also have the cells set to selectable:true, focusable:false.

Seems like it should be easy...

Thanks

This works just fine for me:

.slick-row:hover { background-color: red; }

Just a guess, based on the CSS in your question:

 .slick-row:hover .lr {
     background-color:#dee0fe;
 }

I've just had a go at doing this myself and this is a simplified version of what I came up with. You can tidy this up a lot and assuming your columns don't change it makes sense to cache the inner part of the hash.

Using the API calls it should look something like this:

grid.onMouseEnter.subscribe(function (e) {
    var hash = {};
    var cols = grid.getColumns();

    for (var i = 0; i < cols.length; ++i) {
        hash[grid.getCellFromEvent(e).row][cols[i].id] = "hover";
    }

    grid.setCellCssStyles("hover", hash);
});

grid.onMouseLeave.subscribe(function (e) {
    grid.removeCellCssStyles("hover");
});

All you need to do is get the collection of cells in the row, and style them on the mouse enter/leave of each cell:

$('.slick-cell').mouseenter(function () {
     $(this.parentNode.children).addClass('slick-cell-hovered') ;
});

$('.slick-cell').mouseleave(function () {
     $(this.parentNode.children).removeClass('slick-cell-hovered');
});


.slick-cell-hovered 
{
     background: #EBEFF2 none;
}