Wijmo 5 - FlexGrid and FlexChart
HTML
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://cdn.wijmo.com/5.20143.39/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.20143.39/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.20143.39/controls/wijmo.grid.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20143.39/styles/wijmo.min.css">
<div id="theGrid"></div>
<pre id="testString">
This
Is
Multi
Lines
</pre>
JavaScript
$(document).ready(function () {
var gridElement = $("#theGrid");
gridElement.height($(document).height() - 50);
gridElement.width($(document).width() - 5);
var testStr = $("#testString").text();
// create some random data
data = [];
for (var i = 0; i < 10; i++) {
data.push({
country: 'Ramdom....',
downloads: testStr,
sales: Math.random() * 10000,
expenses: Math.random() * 5000,
expenses2: Math.random() * 5000,
expenses3: Math.random() * 5000,
expenses4: Math.random() * 5000,
expenses5: new Date(),
});
}
// create CollectionView on the data (to get events)
var view = new wijmo.collections.CollectionView(data);
// initialize the grid
var grid = new wijmo.grid.FlexGrid('#theGrid', {
itemsSource: view,
selectionMode: wijmo.grid.SelectionMode.Cell,
allowAddNew: true,
allowDelete: true,
autoSizeMode: wijmo.grid.AutoSizeMode.Both
});
var downloadsColumn = grid.columns.getColumn("downloads");
downloadsColumn.wordWrap = true;
downloadsColumn.isContentHtml = true;
grid.formatItem.addHandler(function (grid, args) {
if (args.col == 1) {
if (args.panel.cellType === wijmo.grid.CellType.Cell && grid.editRange && grid.editRange.row === args.row && grid.editRange.col === args.col) {
// Edit mode
$(args.cell).children().hide(); // Hide the orginal input.
var textArea = $('<textarea style="height: 100%; width: 100%;" rows="4"></textarea>');
textArea.val(args.panel.getCellData(args.row, args.col));
textArea.appendTo(args.cell);
textArea.on("keydown", function () {
if (event.keyCode == wijmo.Key.Enter) {
event.stopImmediatePropagation();
}
});
...