Demo - FlexGrid

by Kyle Vassella

HTML

<link rel="stylesheet" href="http://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>
    
  <p>
    You can customize the grid columns by setting the 
    <b>autoGenerateColumns</b> property to false and populating 
    the columns property in code.</p>
  <div id="gridCols">
  </div>

  <p>
    You can customize the grid's default features by setting 
    the <b>selectionMode</b>, <b>allowSorting</b>, <b>allowDragging</b>,
    <b>isReadOnly</b> and <b>headersVisibility</b> properties
    (among many others).</p>
  <div id="gridProps">
  </div>
  <label>
    <div class="header">selectionMode:</div>
    <div id="selectionMode"></div>
  </label><br>
  <label>
    <div class="header">allowSorting:</div>
    <div id="allowSorting"></div>
  </label><br>
  <label>
    <div class="header">allowDragging:</div>
    <div id="allowDragging"></div>
  </label><br>
  <label>
    <div class="header">isReadOnly:</div>
    <div id="isReadOnly"></div>
  </label><br>
  <label>
    <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 some random data
  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
    });
  }

  // default grid
  var gridDefault = new wijmo.grid.FlexGrid('#gridDefault', {
    itemsSource: data,
  });
  
	// customize columns
  var gridCols = new wijmo.grid.FlexGrid('#gridCols', {
  	autoGenerateColumns: false,
    itemsSource: data,
    columns: [
    	{ header: 'Country', binding: 'country', width: '*' },
    	{ header: 'Downloads (k)', binding: 'downloads', format: 'n1,' },
    	{ header: 'Sales (k)', binding: 'sales', format: 'n1,' },
    	{ header: 'Expenses (k)', binding: 'expenses', format: 'c1,' },
    ]
  });
  
  // customize properties
  var gridProps = new wijmo.grid.FlexGrid('#gridProps', {
    itemsSource: data,
  });
  var selectionMode = new wijmo.input.ComboBox('#selectionMode', {
  	itemsSource: 'None,Cell,CellRange,Row,RowRange,ListBox'.split(','),
		text: 'CellRange',
    selectedIndexChanged: function() {
    	gridProps.selectionMode = selectionMode.text
    }
  });
  var allowSorting = new wijmo.input.ComboBox('#allowSorting', {
  	itemsSource: 'True,False'.split(','),
		text: 'True',
    selectedIndexChanged: function() {
    	gridProps.allowSorting = allowSorting.text == 'True';
    }
  });
  var allowDragging = new wijmo.input.ComboBox('#allowDragging', {
  	itemsSource: 'None,Columns,Rows,Both'.split(','),
		text: 'Columns',
    selectedIndexChanged: function() {
    	gridProps.allowDragging = allowDragging.text;
    }
  });
  var isReadOnly = new wijmo.input.ComboBox('#isReadOnly', {
  	itemsSource: 'True,False'.split(','),
		text: 'False',
    selectedIndexChanged: function() {
    	gridProps.isReadOnly = isReadOnly.text ==...