Wijmo 5 (Angular) - Changing Cell Value Type

by Joel Parks

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://cdn.wijmo.com/5.20142.0/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.20142.0/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.20142.0/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.20142.0/controls/wijmo.chart.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20142.0/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20142.0/interop/angular/wijmo.angular.js"></script>
<!-- mark this as an Angular application and give it a controller -->
<div ng-app="app" ng-controller="appCtrl">
    
<h1>Simple validation</h1>

    <p>Country names must have 5 or fewer characters.</p>
    <wj-flex-grid
        items-source="data"
        selection-mode="Row"
        cell-edit-ended="cellEditEnded(s, e)"
        items-source-changed="itemsSourceChanged(s, e)">

</div>

JavaScript

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

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

    // initialize the grid
    $scope.itemsSourceChanged = function(sender, args) {

        // add validation attributes to columns
        var col = sender.columns.getColumn('country');
        col.maxLength = 5;
        
        // monitor the keyboard
        sender.hostElement.addEventListener('keypress', function(e) {
            
            // prevent user from typing spaces into the editor
            if (e.target == sender.activeEditor) {
                if (e.charCode == 32) {
                    e.preventDefault();
                }
            }
        }, true);
    }
    
    // limit country length to 5 characters
    $scope.cellEditEnded = function(sender, args) {
        var col = sender.columns[args.col];
        if (col.maxLength) {
            var val = sender.getCellData(args.row, args.col);
            if (val.length > col.maxLength) {
                alert('This column is limited to '+ col.maxLength +' characters.');
                sender.setCellData(args.row, args.col, val.substr(0, 5));
                sender.invalidate();
            }
        }
        sender.setCellData(args.row, args.col + 1, 'Custom', false);
    }
    
    // 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
        });
    }

    // expose data as a CollectionView to get events
    $scope.data = new wijmo.collections.CollectionView(data);
});