<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
<!-- Wijmo references (required) -->
<script src="http://cdn.wijmo.com/5.20151.48/controls/wijmo.min.js" type="text/javascript"></script>
<link href="http://cdn.wijmo.com/5.20151.48/styles/wijmo.min.css" rel="stylesheet" type="text/css" />
<!-- Wijmo controls (optional, include the controls you need) -->
<script src="http://cdn.wijmo.com/5.20151.48/controls/wijmo.grid.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/5.20151.48/controls/wijmo.chart.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/5.20151.48/controls/wijmo.input.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/5.20151.48/controls/wijmo.gauge.min.js" type="text/javascript"></script>
</head>
<body>
<p>Pure JS Grid </p>
<div id="gsFlexGrid"></div>
<p>React JS Grid </p>
<div id="grid_01"></div>
<script type="text/javascript">
var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');
var data = [];
for (var i = 0; i < 6; i++) {
data.push({
id: i,
country: countries[i % countries.length],
amount: Math.random() * 10000,
});
}
var grid = new wijmo.grid.FlexGrid('#gsFlexGrid');
grid.autoGenerateColumns = false;
var cv = new wijmo.collections.CollectionView(data);
// initialize grid
grid.initialize({
itemsSource: cv
});
grid.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);
// set cell's foreground color
cell.style.color = getAmountColor(cellData);
}
};
var c = new wijmo.grid.Column();
c.binding = 'id';
c.header = 'ID';
c.width = '*';
grid.columns.push(c);
var c = new wijmo.grid.Column();
c.binding = 'country';
c.header = 'Country';
c.width = '*';
grid.columns.push(c);
var c = new wijmo.grid.Column();
c.binding = 'amount';
c.header = 'Amount';
c.width = '*';
grid.columns.push(c);
function getAmountColor(amount) {
return amount < 500 ? 'red' : amount < 2500 ? 'black' : 'green';
}
</script>
<script type="text/jsx">
/** @jsx React.DOM */
var FlexGrid = React.createClass({
render: function() {
return (
<div></div>
);
},
getInitialState: function() {
return {
// Grid options
gridOpts: {
selectionMode: wijmo.grid.SelectionMode.Cell,
showSort: false,
autoGenerateColumns: false,
columns: [
{header: "ID3", "binding":"country", "width":"*"},
{"header": "Country", "binding":"country", "width":"*"},
{"header": "Amount", "binding":"amount", "width":"*"}
],
//note here that we are defining the formatter function here note that this calls the formatter in our script to actually apply the styling
// the getAmountColor is the same funciton being called by both grids
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);
// set cell's foreground color
cell.style.color = getAmountColor(cellData);
}
},
},
// Default data
grid_01_data: [
{"id":0, "country":"Greece", "amount": 2000},
{"id":1, "country":"USA", "amount": 100},
{"id":2, "country":"UK", "amount": 750},
{"id":3, "country":"Germany", "amount": 1500},
{"id":4, "country":"Japan", "amount": 2000},
{"id":5, "country":"Greece", "amount": 3000},
]
};
},
// Invoked once, both on the client and the server, immediately before the initial render occurs.
componentWillMount: function()
{
// CollectionView with default data
// Note: cv is created here so that "this.cv" is available throughout the lifecycle
// Since we defined our data array in our getInitialState, we can reference it using the this.state call.
// Similiar to what we will do below with the options.
this.cv = new wijmo.collections.CollectionView( this.state.grid_01_data );
this.cv.pageSize = 6;
},
// Invoked once, only on the client, immediately after the initial rendering occurs.
// At this point in the lifecycle, the component has a DOM representation which you can access via react.findDOMNode(this)
// If we want to integrate with other JS Frameworks, set timers using setTimeout or setInterval, or send AJAX requests, perform those operations in this method.
componentDidMount: function()
{
// Create and connect the grid
this.grid = new wijmo.grid.FlexGrid( this.getDOMNode(this.refs.grid_01), this.state.gridOpts);
this.grid.itemsSource = this.cv;
},
// Inovolked immediately after the component's updates are flushed to the DOM, this method is not called after initial render.
// Use this an
componentWillUnmount: function() {
var div = React.findDOMNode(this);
var grid = wijmo.Control.getControl(div);
grid.dispose();
}
});
React.render(
<FlexGrid/>,
document.getElementById('grid_01')
);
</script>
</body>
</html>
// Code goes here
/* Styles go here */