Wijmo 5 - AngularJS directives

by Manish Gupta

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.chart.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/interop/angular/wijmo.angular.min.js"></script>
<div ng-app="app" ng-controller="appCtrl" class="container">
        <ul>
            <li>Issue 1)  I've gotton Word wrap to work before -- for some reason it's not working now in a cell template</li>
            <li>Issue 2)  all rows are resizing to the same height instead of dependent upon the data in its own row</li>
            <li>Issue 3)  How do I bind the textarea to the template variables $value or $item.country or data[0].country</li>
        </ul>
        <p>Testing TextArea within a CellEdit template</p>
        <wj-flex-grid items-source="data" 
                      control="flex"
                      initialized="init(s,e)"
                      cell-edit-ended="cellEditEnded(s,e)">
            <wj-flex-grid-cell-template cell-type="RowHeader">
                {{$row.index}}
            </wj-flex-grid-cell-template>
            <wj-flex-grid-column header="Variable" width="200" binding="country" width="*" word-wrap="true">
                <wj-flex-grid-cell-template cell-type="ColumnHeader">
                    {{$col.header}}
                    <button type="button" class="btn btn-default btn-xs pull-right">
                        <span class="glyphicon glyphicon-plus" area-hidden="true"></span>
                    </button>
                </wj-flex-grid-cell-template>
                <wj-flex-grid-cell-template cell-type="Cell">
                    <div...

CSS

.wj-flexgrid {
  height: 150px; 
  margin-top:10px;
 }
 .divwordwrap {
   word-break: break-word;
 }
 .tadiv {
   width: 100%;
   height: 100%;
 }
 textarea {
      width: 98%;
      height: 98%;
      vertical-align: middle;
      resize: none;
      }

JavaScript

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

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

            // create some random data
            var countries = 'United States of America asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf,Germany,UK,Japan,Italy,Greece'.split(',');
            var data = [];
            var testvar = "asdf asdf asdf asdf asdf asdf asdf asdf asdf ";
            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
                });

                

            }
            $scope.testBtn = function (a) {
                alert(a.country);
                alert(a.sales);
            };
            // expose data as a CollectionView to get events
            $scope.data = new wijmo.collections.CollectionView(data);            
            $scope.init = function (s, e) {
                s.autoSizeRows(0, s.rows.length - 1);
            }
            $scope.cellEditEnded = function (s, e) {
                s.autoSizeRow(e.row);
            }
            
        });