Wijmo 5 - FlexGrid Hover Style

Allow Editing using DropDown

by Manish Gupta

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.20181.436/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.20181.436/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.20181.436/controls/wijmo.input.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.20181.436/controls/wijmo.grid.min.js"></script>
<h1>
  FlexGrid hover styles
</h1>


<h3>
  Hover on Row (code required)
</h3>
<p>
  This grid highlights the entire row under the mouse using code. It handles
  mouse events to track the row under the mouse and changes the row's <b>cssStyle</b>
  property to reflect that. This approach makes the CSS very simple, and allows
  you to change the style of all cells in the hover row (such as font-weight),
  but prevents the use of transitions (because the cells are re-generated when 
  the <b>cssStyle</b> property changes:
</p>
<div id="codedClass"></div>

CSS

/* css for hovering on non-header cells */
#hoverCell .wj-cell:not(.wj-header):hover {
  background-color:rgb(200,255,200) !important;
  color:black !important;
  font-weight: bold;
  transition: all 0.5s;
}

/* css for hovering on non-header rows */
#hoverRow [wj-part=cells] {
  overflow: hidden;
}
#hoverRow .wj-cell:not(.wj-header):hover {
  overflow: visible;
  font-weight: bold;
}
#hoverRow .wj-cell:not(.wj-header):after {
  content: '';
  background: transparent;
  transition: all 0.5s;
}
  #hoverRow .wj-cell:not(.wj-header):hover:after {
    position: absolute;
    left:-10000px;
    top:0;
    width:20000px;
    height:100%;
    background: rgba(0,150,0, 0.15);
    transition: all 0.5s;
  }
  
/* css for hover row (set in code) */
.hoverRow {
  background-color:rgb(200,255,200) !important;
  color:black !important;
  font-weight: bold;
}

body {
  background: #f0f0f0;
}

JavaScript

$(function() {

	
		// hover on row (class name set in code)
    var hoverRow = -1;
    var flex = new wijmo.grid.FlexGrid('#codedClass', {
    	itemsSource: getData()
    });
    // remove Added CSS class if DropDown is opened
   
    flex.columns[0].dataMap= new wijmo.grid.DataMap(getData(),'country','country');
    flex.hostElement.addEventListener('mousemove', function(e) {
        var ht = flex.hitTest(e);
        var r = ht.row;
        if (r != hoverRow && !flex._edtHdl._list) {
            if (hoverRow > -1) {
                flex.rows[hoverRow].cssClass = null;
            }
            hoverRow = r;
            if (hoverRow > -1) {
                flex.rows[hoverRow].cssClass = 'hoverRow';
            }
        }
    });
    flex.hostElement.addEventListener('mouseleave', function(e) {
        if (hoverRow > -1 && !flex._edtHdl._list) {
            flex.rows[hoverRow].cssClass = null;
            hoverRow = -1;
        }
    });
});

function getData() {

    // create some random data
    var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
        data = [];
    for (var i = 0; i < countries.length; i++) {
        data.push({
            country: countries[i],
            downloads: Math.round(Math.random() * 20000),
            sales: Math.random() * 10000,
            expenses: Math.random() * 5000
        });
    }
    return data;
}