Wijmo 5 - Animated Cell Updates

by Joel Parks

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://cdn.wijmo.com/5.20151.51/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.20151.51/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.20151.51/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.20151.51/interop/angular/wijmo.angular.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20151.51/styles/wijmo.min.css">
<div ng-app="app" ng-controller="appCtrl">
    
<h3>Animated Cell Updates</h3>

    <p>This sample shows how you can use the wijmo.animate method to animate cell styles creating a 'flare' effect that calls attention to asynchronous changes.</p>
    
    <wj-flex-grid
        control="flex"
        items-source="data"
        prepare-cell-for-edit="prepareCellForEdit(s,e)">
        <wj-flex-grid-column binding="state" header="State"></wj-flex-grid-column>
        <wj-flex-grid-column binding="temp" header="Avg Temperature" format="n1"></wj-flex-grid-column>
    </wj-flex-grid>

JavaScript

'use strict';

// define app, include Wijmo 5 directives
var app = angular.module('app', ['wj']);

// controller
app.controller('appCtrl', function ($scope) {

    // align editor content to the right when editing numeric values
    $scope.prepareCellForEdit = function (s, e) {
        if (s.columns[e.col].dataType == wijmo.DataType.Number) {
            s.activeEditor.style.textAlign = 'right';
        }
    }

    // get products
    var data = [
        { state: 'Alabama', temp: 62.8 },
        { state: 'Alaska', temp: 26.6 },
        { state: 'Arizona', temp: 60.3 },
        { state: 'Arkansas', temp: 60.4 },
        { state: 'California', temp: 59.4 },
        { state: 'Colorado', temp: 45.1 },
        { state: 'Connecticut', temp: 49 },
        { state: 'Delaware', temp: 55.3 },
        { state: 'Florida', temp: 70.7 },
        { state: 'Georgia', temp: 63.5 },
        { state: 'Hawaii', temp: 70 },
        { state: 'Idaho', temp: 44.4 },
        { state: 'Illinois', temp: 51.8 },
        { state: 'Indiana', temp: 51.7 },
        { state: 'Iowa', temp: 47.8 },
        { state: 'Kansas', temp: 54.3 },
        { state: 'Kentucky', temp: 55.6 },
        { state: 'Louisiana', temp: 66.4 },
        { state: 'Maine', temp: 41 },
        { state: 'Maryland', temp: 54.2 },
        { state: 'Massachusetts', temp: 47.9 },
        { state: 'Michigan', temp: 44.4 },
        { state: 'Minnesota', temp: 41.2 },
        { state: 'Mississippi', temp: 63.4 },
        { state: 'Missouri', temp: 54.5 },
        { state: 'Montana', temp: 42.7 },
        { state: 'Nebraska', temp: 48.8 },
        { state: 'Nevada', temp: 49.9 },
        { state: 'New Hampshire', temp: 43.8 },
        { state: 'New Jersey', temp: 52.7 },
        { state: 'New Mexico', temp: 53.4 },
        { state: 'New York', temp: 45.4 },
        { state: 'North Carolina', temp: 59 },
        { state: 'North Dakota', temp: 40.4 },
        { state: 'Ohio', temp: 50.7 },
        { state: 'Oklahoma', temp: 59.6...