Wijmo 5 (Angular) - FlexSheet Grouping
Auto size row in flex sheet
by Joel Parks
HTML
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20162.198/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20162.198/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.20162.198/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.20162.198/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.20162.198/controls/wijmo.grid.filter.min.js"></script>
<script src="http://cdn.wijmo.com/5.20162.198/controls/wijmo.grid.sheet.min.js"></script>
<script src="http://cdn.wijmo.com/5.20162.198/interop/angular/wijmo.angular.min.js"></script>
<div ng-app="app" ng-controller="appCtrl">
<wj-flex-sheet control="flex" selected-sheet-index="0" initialized="init(s,e)" style="height:400px;">
<wj-sheet name="Country" items-source="data"></wj-sheet>
</wj-flex-sheet>
<button id="logSelection">
Log Selection
</button>
</div>
JavaScript
function getData(value) {
var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
data = [];
for (var i = 0; i < value; i++) {
data.push({
id: i,
country: countries[i%countries.length],
sales: Math.random() * 1000,
expenses: Math.random() * 10000,
downloads: Math.random() * 100
});
}
return data;
}
var app = angular.module('app', ['wj']);
app.controller('appCtrl', function ($scope) {
$scope.data = new wijmo.collections.CollectionView(getData(49));
$scope.init = function (s, e) {
s.columns[1].width = 200;
s.columns[1].wordWrap = true;
// s.autoSizeRow(1); for resize particular row
s.autoSizeRows(1, s.rows.length-1, false, 5);
document.getElementById('logSelection').addEventListener("click", function() {
console.log(s.selectedRanges);
console.log(s.selection);
});
}
});