Wijmo 5 [Flex Grid]

Format row header using cell template

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20162.188/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20162.188/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.20162.188/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.20162.188/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.20162.188/interop/angular/wijmo.angular.min.js"></script>
 <div ng-app="app" ng-controller="appCtrl">
 <h3>
 Format Row header using cell template
 </h3>
 Here we can use desire function for format rowheader.
        <wj-flex-grid items-source="data">
            <wj-flex-grid-cell-template cell-type="RowHeader">
               R
            </wj-flex-grid-cell-template>
        </wj-flex-grid>
        <div class="btn-group">
            <button type="button" class="btn" ng-click="data.moveToFirstPage()">
                <span class="glyphicon glyphicon-fast-backward"></span>
            </button>
            <button type="button" class="btn" ng-click="data.moveToPreviousPage()">
                <span class="glyphicon glyphicon-step-backward"></span>
            </button>
            <button type="button" class="btn" disabled style="width:100px">
                {{data.pageIndex + 1 | number}} / {{data.pageCount | number}}
            </button>
            <button type="button" class="btn" ng-click="data.moveToNextPage()">
                <span class="glyphicon glyphicon-step-forward"></span>
            </button>
            <button type="button" class="btn" ng-click="data.moveToLastPage()">
                <span class="glyphicon glyphicon-fast-forward"></span>
            </button>
        </div>
    </div>

JavaScript

var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
              data = [];
        for (var i = 0; i < 50; 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 app = angular.module('app', ['wj'])
        .controller('appCtrl', function ($scope) {
            $scope.data = new wijmo.collections.CollectionView(data);
            $scope.data.pageSize = 10;
            
        });