Demo - FlexGrid

by Joel Parks

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<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.input.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.gauge.min.js"></script>
<div class="container">

  <h1>
    FlexGrid: Custom Tab action
  </h1>
  <p>
    This sample handles the 'keydown' event to cause the tab key
    to skip over read-only cells.</p>
  <div id="grid">
  </div>
  <button id="addRow" onclick="addRow()">Çà Ãß°¡</button>
</div>

CSS

.wj-flexgrid {
  max-height: 250px;
  margin-bottom: 12px;
}
.header {
  display: inline-block;
  width: 150px;
  text-align: right;
  font-weight: normal;
}

JavaScript

onload = function() {

  function getData(cnt) {
                                var CUD = ["C","U","D","R"];
                         var data = [],
                             dt = new Date(),
                             countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece'],
                             products = ['Widget', 'Gadget', 'Doohickey'],
                             prices = [13000, 25000, 21400, 42500, 53000],
                             colors = ['Black', 'White', 'Red', 'Green', 'Blue'];
                         for (var i = 0; i < cnt; i++) {
                             var date = new Date(dt.getFullYear(), i % 12, 25, i % 24, i % 60, i % 60),
                                 countryId = Math.floor(Math.random() * countries.length),
                                 productId = Math.floor(Math.random() * products.length),
                                 colorId = Math.floor(Math.random() * colors.length),
                                 priceId = Math.floor(Math.random() * prices.length);
                             data.push({
                                 prdNo: 1,
                                 prdNm: "GGGaaaaaaaaaaaaaaaaaaaaaasdxzczxcGGGaaaaaaaaaaaaaaaaaaaaaasdxzczxcGGGaaaaaaaaaaaaaaaaaaaaaasdxzczxcGGGaaaaaaaaaaaaaaaa aaaaaasdxzczxcGGGaaaaaaaaaaaaaaaaaaaaaasdxzczxcGGGaaaaaaaaaaaaaaaaaaaaaasdxzczxcGGGaaaaaaaaaaaaaaaaaaaaaasdxzczxcGGGaaaaaaaaaaaaaaaaaaaaaa sdxzczxcGGGaaaaaaaaaaaaaaaaaaaaaasdxzczxcGGGaaaaaaaaaaaaaaaaaaaaaasdxzczxcGGGaaaaaaaaaaaaaaaaaaaaaasdxzczxcGGGaaaaaaaaaaaaaaaaaaaaaasdxzczxcGGGaaaaaaaaaaaaaaaaaaaaaasdxzczxcGGGaaaaaaaaaaaaaaaaaaaaaasdxzczxcGGGaaaaaaaaaaaaaaaaaaaaaasdxzczxcGGGaaaaaaaaaaaaaaaaaaaaaasdxzczxcGGGaaaaaaaaaaaaaaaaaaaaaasdxzczxcG GGaaaaaaaaaaaaaaaaaaaaaasdxzczxcGGGaaaaaaaaaaaaaaaaaaaaaasdxzczxcGGGaaaaaaaaaaaaaaaaaaaaaasdxzczxcGGGaaaaaaaaaaaaaaaaaaaaaasdxzczxcGGGaaaaaaaaaaaaaaaaaaaaaasdxzczxcGGGaaaaaaaaaaaaaaaaaaaaaasdxzczxcGG...