Wijmo5 - Basic Template

by Ross Dederer

HTML

<script src="http://cdn.wijmo.com/5.20143.26/controls/wijmo.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20143.26/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20143.26/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.20143.26/controls/wijmo.chart.min.js"></script>
<script src="http://cdn.wijmo.com/5.20143.26/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.20143.26/controls/wijmo.gauge.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script src="http://cdn.wijmo.com/5.20143.26/interop/angular/wijmo.angular.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20143.26/styles/themes/wijmo.theme.modern.min.css">
<button class="btn btn-default" data-toggle="modal" data-target="#dlgDetail" id="btnEdit">Edit Detail...</button>
<br/>
<!-- this is the grid -->
<div id="gsFlexGrid"></div>
<div class="modal fade" id="dlgDetail">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                 <h4 class="modal-title">Edit Item</h4>

            </div>
            <div class="modal-body">
                <dl class="dl-horizontal"> <dt>ID</dt>

                    <dd>
                        <input class="form-control" id="country" type="text" />
                    </dd> <dt>Start Date</dt>

                    <dd>
                        <input class="form-control" id="date" type="text" />
                    </dd> <dt>End Start</dt>

                    <dd>
                        <input class="form-control" id="amount" type="text" />
                    </dd> <dt>Country</dt>

                    <dd>
                        <input class="form-control" id="active" type="text" />
                    </dd> <dt>Product</dt>

                ...

CSS

/* set default grid style */
 .wj-flexgrid {
    height: auto;
    width: auto;
    margin-bottom: 12px;
}

JavaScript

var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');
var data = [];
for (var i = 0; i < 250; 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
    });
}

// create the grid and give it some data
var grid = new wijmo.grid.FlexGrid('#gsFlexGrid'),
    cv = new wijmo.collections.CollectionView(data);
cv.groupDescriptions.push(new wijmo.collections.PropertyGroupDescription("country"));

// initialize grid
grid.initialize({
    autoGenerateColumns: false,
    columns: [{
        header: 'Country',
        binding: 'country',
        width: '*',
        isContentHtml: true,
        isReadOnly: true
    }, {
        header: 'Date',
        binding: 'date'
    }, {
        header: 'Revenue',
        binding: 'amount',
        format: 'n0'
    }, {
        header: 'Active',
        binding: 'active'
    }, ],
    itemsSource: cv,

    itemFormatter: function (panel, r, c, cell) {
        // validate CellType and if correct column
        if (wijmo.grid.CellType.Cell == panel.cellType && panel.columns[c].binding == 'amount') {
            // get the cell's data
            var cellData = panel.getCellData(r, c);
        }
    }
});

// Add the processes for buttons' click
document.getElementById('btnEdit').addEventListener('click', function () {
  cv.editItem(cv.currentItem);

  // update the content in the dialog with the current edited item.
  updateDialog(cv.currentEditItem, true);
});

// fill the dialog with the item.
function updateDialog(item, isEdit) {
  document.getElementById('country').value = item.country ? wijmo.Globalize.format(item.country) : '';
  document.getElementById('date').value = item.date ? wijmo.Globalize.format(item.date) : '';
  document.getElementById('amount').value = item.amount ? item.amount : '';
  document.getElementById('active').value = item.active ? item.active : '';
  var title...