Demo - FlexGrid Cell Notes

by Joel Parks

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.filter.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.gauge.min.js"></script>
<div class="container">

  <h1>
    Tooltips on grid Cells
  </h1>
  <p>
    This sample adds a tooltip to the grid and tooltips
    to the grid cells as well. All tooltips have a 
    2 second show delay.</p>
  <div id="theGrid"></div>
</div>

CSS

.wj-flexgrid {
  height: 350px;
}
.wj-cell {
  border-color: #e0e0e0;
}
.wj-cell.wj-has-notes:after {
  position: absolute;
  content: '';
  width: 0;
  right: 0;
  top: -10px;
  border: 10px solid transparent;
  border-right: 10px solid red;
  opacity: .6
}
body {
  margin-bottom: 24pt
}

JavaScript

onload = function() {

    // create a tooltip with a 2 second showDelay
    var tip = new wijmo.Tooltip();
    tip.showDelay = 2000;

    // create the grid
    var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
        itemsSource: getData(),

        // add tooltips to the grid cells
        formatItem: function (s, e) {
            if (e.panel == s.cells) {
                var cellData = s.getCellData(e.row, e.col).toString();
                tip.setTooltip(e.cell, cellData)
            }
        }
    })

    // add a tooltip to the grid as well
    tip.setTooltip(theGrid.hostElement, 'this is the grid\'s tooltip');

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