FlexGrid - JSFiddle

Cell Tooltip & Grouping

by Troy Taylor

HTML

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

<h1>FlexGrid</h1>
<p>
Grouping and Tooltips
</p>
<button ng-click="collapse" >
collapse
</button>
<div ng-app="app" ng-controller="appCtrl">
<wj-flex-grid control="ctx.flex" items-source="ctx.data" item-formatter="itemFormatter" >
        <wj-flex-grid-column binding="id" header="ID"> </wj-flex-grid-column>
        <wj-flex-grid-column binding="country" header="Country"> </wj-flex-grid-column>
        <wj-flex-grid-column binding="date" header="Date"> </wj-flex-grid-column>
        <wj-flex-grid-column binding="amount" header="Amount" format="n0" aggregate="Sum"> </wj-flex-grid-column>
        <wj-flex-grid-column binding="active" header="Active"> </wj-flex-grid-column>
    </wj-flex-grid>
    </div>
</div>

CSS

.wj-tooltip{
  color: #885bff;
  font-style:italic;
}

JavaScript

var app = angular.module('app', ['wj']);
        app.controller('appCtrl', function($scope, $filter) {
            var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
                data = [];
            for (var i = 0; i < 10; i++) {
                data.push({
                    id: i,
                    country: countries[i % countries.length],
                    date: new Date(2014, i % 12, i % 28),
                    amount: Math.random() * 10000,
                    active: i % 4 == 0
                });
            }
            var groupDesc = new wijmo.collections.PropertyGroupDescription("country");
            var cv = new wijmo.collections.CollectionView(data);
            cv.groupDescriptions.push(groupDesc);
            cv.collectionChanged = function(){}
            $scope.ctx = {
                flex: null,
                data: cv
            };
            $scope.$watch('ctx.flex', function() {
                if ($scope.ctx.flex) {
                    var flex = $scope.ctx.flex;
                    var tip = new wijmo.Tooltip(),
                        rng = null;
                    flex.hostElement.addEventListener('mousemove', function(evt) {
                        var ht = flex.hitTest(evt);
                        if (!ht.range.equals(rng)) {
                            if (ht.cellType == wijmo.grid.CellType.Cell) {
                                rng = ht.range;
                                if (flex.rows[rng.row] instanceof wijmo.grid.GroupRow) {
                                    var data = flex.rows[rng.row].getGroupHeader();
                                    tipContent = 'cell (' + rng.row + ' ' + rng.col + ') contains "<b>' + data + '</b>"';
                                } else {
                                    var data = wijmo.escapeHtml(flex.getCellData(rng.row, rng.col, true)),
                                        tipContent = 'cell (' + rng.row + ' ' + rng.col + ') contains "<b>' + data + '</b>"';
...