Wijmo 5 - FlexGrid and FlexChart

by sarunokoshikake

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
</re>

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.inputType = "textarea";
    
    grid.autoSizeRows(0, grid.rows.length, false, 50);
});