Demo - FlexGrid

by Joel Parks

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<div class="container">

  <h1>
    FlexGrid
  </h1>
  <p>
    The FlexGrid allows you to visualize and edit tabular data.
    It provides a variety of options about how to present and 
    perform operations over the data, including selection, 
    sorting, filtering, grouping, paging, editing, formatting,
    etc.</p>
  <p>
    Populate the FlexGrid by setting its <b>itemsSource</b>
    property to an array containing regular JavaScript objects. 
    The grid will automatically generate columns to display
    the data items, and will allow users to select, sort, and 
    edit the data.</p>
  <div id="gridDefault">
  </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() {

	var previousValue, newValue;

  // default grid
  var gridDefault = new wijmo.grid.FlexGrid('#gridDefault', {
    itemsSource: getData(),
    cellEditEnding: function(s, e) {
    	previousValue = s.getCellData(e.row, e.col);
    	console.log("Original cell value: " + previousValue);
    },
    cellEditEnded: function(s, e) {
    	newValue = s.getCellData(e.row, e.col);
    	for(var i = 0; i < s.columns.length; i++) {
      	if(i == 0) {
        	console.log("ID: " + s.getCellData(e.row, i));
        } else if(i == 1) {
        	console.log("Country: " + s.getCellData(e.row, i));
          if(s.itemsSource[e.row].country !== 'Italy') {
          	console.log("Country cells may only be changed to 'Italy'.");
            s.setCellData(e.row, e.col, previousValue);
          } else {
          	s.itemsSource[e.row].active = true;
          }
        } else if(i == 2) {
        	console.log("Active: " + s.getCellData(e.row, i));
        } else if(i == 3) {
        	console.log("Downloads: " + s.getCellData(e.row, i));
        } else if(i == 4) {
        	console.log("Sales: " + s.getCellData(e.row, i));
        } else {
        	console.log("Expenses: " + s.getCellData(e.row, i));
        }
      }
      console.log("Entire row of data:");
      console.log(s.rows[e.row].dataItem);
    }
  });
  
  // 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: false,
	      downloads: Math.round(Math.random() * 200000),
	      sales: Math.random() * 100000,
	      expenses: Math.random() * 50000
	    });
	  }
    return data;
  }
}