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="theGrid">
  </div>
  <div id="theComboBox"></div>
</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() {

  // create the grid
  var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
  	autoGenerateColumns: false,
		columns: [
    	{ header: 'ID *', binding: 'id', isReadOnly: true },
    	{ header: 'Country', binding: 'country' },
    	{ header: 'Active', binding: 'active' },
    	{ header: 'Downloads *', binding: 'downloads', isReadOnly: true },
    	{ header: 'Sales', binding: 'sales' },
    	{ header: 'Expenses', binding: 'expenses' },
    ],
    itemsSource: getData(),
    keyActionTab: 'Cycle',
  });
  theGrid.addEventListener(theGrid.hostElement, 'keydown', function(e) {
  
  	// if this is a Tab
  	if (e.keyCode == 9) {

			// we'll handle it
    	e.preventDefault();

			// move the selection
			for (var done = false; !done;) {

				// move the selection
				var s = theGrid.selection;
				theGrid._keyHdl._performKeyAction(theGrid.keyActionTab, e.shiftKey);
        
        // until we're at an editable cell
        if (!theGrid.columns[theGrid.selection.col].isReadOnly) {
        	done = true;
        }
        
        // or until we get stuck
        if (theGrid.selection.equals(s)) {
        	done = true;
        }
      }
      theGrid.invalidate();
    }
  }, true);

	// create some random data
	function getData() {
	  var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
	    data = [];
	  for (var i = 0; i < 200; i++) {
	    data.push({
	      id: i,
	      country: countries[i % countries.length],
	      active: i % 5 != 0,
	      downloads: Math.round(Math.random() * 200000),
	      sales: Math.random() * 100000,
	      expenses: Math.random() * 50000
	    });
  	}
  	return data;
  }
}