Wijmo 5[Flex Grid]
PureJS - Wrap data in cell and column header
HTML
<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.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.filter.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
<div id="theGrid"></div>
JavaScript
var countries = 'US,Germany is a Western European country with a terrain of vast forests.,UK,Japan,Italy commanding a long Mediterranean coastline has left a powerful mark on Western culture and cuisine,Greece'.split(','),
colors = 'blue,red,yellow,green'.split(','), data = [];
for (var i = 0; i < 10; i++) {
data.push({
id: i,
country: countries[i % countries.length],
date: new Date(2014, i % 12, i % 28),
color: colors[Math.floor((Math.random() * 4))],
active: i % 4 == 0
});
}
var update = true;
// add data array to scope
var grid = new wijmo.grid.FlexGrid("#theGrid");
grid.itemsSource = data;
grid.initialize({
itemsSource: data,
autoGenerateColumns:false,
columns: [
{ binding: 'country', header: 'Country Name here',wordWrap:true},
{binding:'color',header:'Color'}]
});
grid.updatedView.addHandler(function (s, e) {
if (update) {
grid.autoSizeRow(0, true, 5);
grid.autoSizeRows(0, grid.rows.length - 1, false, 5);
update = false;
}
});
grid.sortedColumn.addHandler(function () {
update = true;
});
grid.cellEditEnded.addHandler(function () {
update = true;
});
var filter = new wijmo.grid.filter.FlexGridFilter(grid);