mohiit1502/ag-grid-react-example
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Tidy examples

Browse Source
This commit is contained in:
Sean Landsman
2017-09-18 16:03:27 +01:00
parent ad6bc068b2
commit 7075f57d88
13 changed files with 194 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/filterComponentExample/FilterComponentExample.jsx
View File

@@ -13,8 +13,8 @@ export default class FilterComponentExample extends Component {
this.state = { this.state = {
gridOptions: {}, gridOptions: {},
rowData: this.createRowData(), rowData: FilterComponentExample.createRowData(),
columnDefs: this.createColumnDefs(), columnDefs: FilterComponentExample.createColumnDefs(),
}; };
this.onGridReady = this.onGridReady.bind(this); this.onGridReady = this.onGridReady.bind(this);
@@ -32,7 +32,7 @@ export default class FilterComponentExample extends Component {
this.gridApi.getFilterInstance("name").getFrameworkComponentInstance().componentMethod("Hello World!"); this.gridApi.getFilterInstance("name").getFrameworkComponentInstance().componentMethod("Hello World!");
} }
createColumnDefs() { static createColumnDefs() {
return [ return [
{headerName: "Row", field: "row", width: 400}, {headerName: "Row", field: "row", width: 400},
{ {
@@ -45,7 +45,7 @@ export default class FilterComponentExample extends Component {
]; ];
} }
createRowData() { static createRowData() {
return [ return [
{"row": "Row 1", "name": "Michael Phelps"}, {"row": "Row 1", "name": "Michael Phelps"},
{"row": "Row 2", "name": "Natalie Coughlin"}, {"row": "Row 2", "name": "Natalie Coughlin"},

8
src/fullWidthExample/FullWidthComponentExample.jsx
View File

@@ -10,8 +10,8 @@ export default class FullWidthComponentExample extends Component {
this.state = { this.state = {
gridOptions: {}, gridOptions: {},
rowData: this.createRowData(), rowData: FullWidthComponentExample.createRowData(),
columnDefs: this.createColumnDefs() columnDefs: FullWidthComponentExample.createColumnDefs()
}; };
this.onGridReady = this.onGridReady.bind(this); this.onGridReady = this.onGridReady.bind(this);
@@ -28,7 +28,7 @@ export default class FullWidthComponentExample extends Component {
return (rowNode.id === "0") || (parseInt(rowNode.id) % 2 === 0); return (rowNode.id === "0") || (parseInt(rowNode.id) % 2 === 0);
} }
createColumnDefs() { static createColumnDefs() {
return [ return [
{ {
headerName: "Name", headerName: "Name",
@@ -43,7 +43,7 @@ export default class FullWidthComponentExample extends Component {
]; ];
} }
createRowData() { static createRowData() {
return [ return [
{name: "Bob", age: 10}, {name: "Bob", age: 10},
{name: "Harry", age: 3}, {name: "Harry", age: 3},

8
src/richComponentExample/RichComponentsExample.jsx
View File

@@ -9,8 +9,8 @@ export default class RichComponentsExample extends Component {
super(props); super(props);
this.state = { this.state = {
rowData: this.createRowData(), rowData: RichComponentsExample.createRowData(),
columnDefs: this.createColumnDefs() columnDefs: RichComponentsExample.createColumnDefs()
}; };
this.onGridReady = this.onGridReady.bind(this); this.onGridReady = this.onGridReady.bind(this);
@@ -23,7 +23,7 @@ export default class RichComponentsExample extends Component {
this.gridApi.sizeColumnsToFit(); this.gridApi.sizeColumnsToFit();
} }
createColumnDefs() { static createColumnDefs() {
return [ return [
{ {
headerName: "Name", headerName: "Name",
@@ -44,7 +44,7 @@ export default class RichComponentsExample extends Component {
} }
]; } ]; }
createRowData() { static createRowData() {
return [ return [
{name: 'Homer Simpson', ratios: {top: 0.25, bottom: 0.75}}, {name: 'Homer Simpson', ratios: {top: 0.25, bottom: 0.75}},
{name: 'Marge Simpson', ratios: {top: 0.67, bottom: 0.39}}, {name: 'Marge Simpson', ratios: {top: 0.67, bottom: 0.39}},

9
src/richGridExample/HeaderGroupComponent.jsx
View File

@@ -17,19 +17,20 @@ export default class HeaderGroupComponent extends React.Component {
} }
render() { render() {
let arrowClassName = "customExpandButton " + (this.state.expanded ? " expanded": " collapsed"); let arrowClassName = "customExpandButton " + (this.state.expanded ? " expanded" : " collapsed");
return <div> return <div>
<div className="customHeaderLabel"> {this.props.displayName}</div> <div className="customHeaderLabel"> {this.props.displayName}</div>
<div onClick={this.expandOrCollapse.bind(this)} className={arrowClassName}><i className="fa fa-arrow-right" /></div> <div onClick={this.expandOrCollapse.bind(this)} className={arrowClassName}><i
className="fa fa-arrow-right"/></div>
</div> </div>
} }
expandOrCollapse (){ expandOrCollapse() {
this.props.setExpanded(!this.state.expanded); this.props.setExpanded(!this.state.expanded);
}; };
onExpandChanged (){ onExpandChanged() {
this.setState({ this.setState({
expanded: this.props.columnGroup.getOriginalColumnGroup().isExpanded() expanded: this.props.columnGroup.getOriginalColumnGroup().isExpanded()
}) })

21
src/richGridExample/NameCellEditor.jsx
View File

@@ -1,10 +1,9 @@
import React from 'react'; import React from 'react';
import RefData from './RefData';
import * as PropTypes from 'prop-types'; import * as PropTypes from 'prop-types';
var KEY_BACKSPACE = 8; const KEY_BACKSPACE = 8;
var KEY_DELETE = 46; const KEY_DELETE = 46;
var KEY_F2 = 113; const KEY_F2 = 113;
// cell renderer for the proficiency column. this is a very basic cell editor, // cell renderer for the proficiency column. this is a very basic cell editor,
export default class NameCellEditor extends React.Component { export default class NameCellEditor extends React.Component {
@@ -20,9 +19,9 @@ export default class NameCellEditor extends React.Component {
// experience is similar to Excel // experience is similar to Excel
createInitialState(props) { createInitialState(props) {
var startValue; let startValue;
var putCursorAtEndOnFocus = false; const putCursorAtEndOnFocus = false;
var highlightAllOnFocus = false; const highlightAllOnFocus = false;
if (props.keyPress === KEY_BACKSPACE || props.keyPress === KEY_DELETE) { if (props.keyPress === KEY_BACKSPACE || props.keyPress === KEY_DELETE) {
// if backspace or delete pressed, we clear the cell // if backspace or delete pressed, we clear the cell
@@ -56,7 +55,7 @@ export default class NameCellEditor extends React.Component {
onChangeListener(event) { onChangeListener(event) {
// if doing React, you will probably be using a library for managing immutable // if doing React, you will probably be using a library for managing immutable
// objects better. to keep this example simple, we don't use one. // objects better. to keep this example simple, we don't use one.
var newState = { const newState = {
value: event.target.value, value: event.target.value,
putCursorAtEndOnFocus: this.state.putCursorAtEndOnFocus, putCursorAtEndOnFocus: this.state.putCursorAtEndOnFocus,
highlightAllOnFocus: this.state.highlightAllOnFocus highlightAllOnFocus: this.state.highlightAllOnFocus
@@ -73,7 +72,7 @@ export default class NameCellEditor extends React.Component {
// view, it may not yet be in the browser (put in by ag-Grid) so focus will not work // view, it may not yet be in the browser (put in by ag-Grid) so focus will not work
afterGuiAttached() { afterGuiAttached() {
// get ref from React component // get ref from React component
var eInput = this.refs.textField; const eInput = this.refs.textField;
eInput.focus(); eInput.focus();
if (this.highlightAllOnFocus) { if (this.highlightAllOnFocus) {
eInput.select(); eInput.select();
@@ -82,7 +81,7 @@ export default class NameCellEditor extends React.Component {
// this comes into play in two scenarios: a) when user hits F2 and b) // this comes into play in two scenarios: a) when user hits F2 and b)
// when user hits a printable character, then on IE (and only IE) the carot // when user hits a printable character, then on IE (and only IE) the carot
// was placed after the first character, thus 'apply' would end up as 'pplea' // was placed after the first character, thus 'apply' would end up as 'pplea'
var length = eInput.value ? eInput.value.length : 0; const length = eInput.value ? eInput.value.length : 0;
if (length > 0) { if (length > 0) {
eInput.setSelectionRange(length, length); eInput.setSelectionRange(length, length);
} }
@@ -101,7 +100,7 @@ export default class NameCellEditor extends React.Component {
// just to demonstrate, if you type in 'cancel' then the edit will not take effect // just to demonstrate, if you type in 'cancel' then the edit will not take effect
isCancelAfterEnd() { isCancelAfterEnd() {
if (this.state.value && this.state.value.toUpperCase()==='CANCEL') { if (this.state.value && this.state.value.toUpperCase() === 'CANCEL') {
return true; return true;
} else { } else {
return false; return false;

5
src/richGridExample/ProficiencyCellRenderer.jsx
View File

@@ -1,5 +1,4 @@
import React from 'react'; import React from 'react';
import RefData from './RefData';
// cell renderer for the proficiency column. this is a very basic cell renderer, // cell renderer for the proficiency column. this is a very basic cell renderer,
// it is arguable that we should not of used React and just returned a string of // it is arguable that we should not of used React and just returned a string of
@@ -7,7 +6,7 @@ import RefData from './RefData';
export default class ProficiencyCellRenderer extends React.Component { export default class ProficiencyCellRenderer extends React.Component {
render() { render() {
var backgroundColor; let backgroundColor;
if (this.props.value < 20) { if (this.props.value < 20) {
backgroundColor = 'red'; backgroundColor = 'red';
} else if (this.props.value < 60) { } else if (this.props.value < 60) {
@@ -17,7 +16,7 @@ export default class ProficiencyCellRenderer extends React.Component {
} }
return ( return (
<div className="div-percent-bar" style={{ width: this.props.value + '%', backgroundColor: backgroundColor }}> <div className="div-percent-bar" style={{width: this.props.value + '%', backgroundColor: backgroundColor}}>
<div className="div-percent-value">{this.props.value}%</div> <div className="div-percent-value">{this.props.value}%</div>
</div> </div>
); );

39
src/richGridExample/ProficiencyFilter.jsx
View File

@@ -1,13 +1,13 @@
import React from 'react'; import React from 'react';
var PROFICIENCY_NAMES = ['No Filter', 'Above 40%', 'Above 60%', 'Above 80%']; const PROFICIENCY_NAMES = ['No Filter', 'Above 40%', 'Above 60%', 'Above 80%'];
// the proficiency filter component. this demonstrates how to integrate // the proficiency filter component. this demonstrates how to integrate
// a React filter component with ag-Grid. // a React filter component with ag-Grid.
export default class ProficiencyFilter extends React.Component { export default class ProficiencyFilter extends React.Component {
constructor(props) { constructor(props) {
super(); super(props);
this.state = { this.state = {
selected: PROFICIENCY_NAMES[0] selected: PROFICIENCY_NAMES[0]
}; };
@@ -15,14 +15,18 @@ export default class ProficiencyFilter extends React.Component {
// called by agGrid // called by agGrid
doesFilterPass(params) { doesFilterPass(params) {
var value = this.props.valueGetter(params); const value = this.props.valueGetter(params);
var valueAsNumber = parseFloat(value); const valueAsNumber = parseFloat(value);
switch (this.state.selected) { switch (this.state.selected) {
case PROFICIENCY_NAMES[1] : return valueAsNumber >= 40; case PROFICIENCY_NAMES[1] :
case PROFICIENCY_NAMES[2] : return valueAsNumber >= 60; return valueAsNumber >= 40;
case PROFICIENCY_NAMES[3] : return valueAsNumber >= 80; case PROFICIENCY_NAMES[2] :
default : return true; return valueAsNumber >= 60;
case PROFICIENCY_NAMES[3] :
return valueAsNumber >= 80;
default :
return true;
} }
}; };
@@ -32,7 +36,7 @@ export default class ProficiencyFilter extends React.Component {
}; };
onButtonPressed(name) { onButtonPressed(name) {
var newState = {selected: name}; const newState = {selected: name};
// set the state, and once it is done, then call filterChangedCallback // set the state, and once it is done, then call filterChangedCallback
this.setState(newState, this.props.filterChangedCallback); this.setState(newState, this.props.filterChangedCallback);
} }
@@ -42,13 +46,14 @@ export default class ProficiencyFilter extends React.Component {
} }
render() { render() {
var rows = []; const rows = [];
PROFICIENCY_NAMES.forEach( (name)=> { PROFICIENCY_NAMES.forEach((name) => {
var selected = this.state.selected === name; const selected = this.state.selected === name;
rows.push( rows.push(
<div key={name}> <div key={name}>
<label style={{paddingLeft: 4}}> <label style={{paddingLeft: 4}}>
<input type="radio" checked={selected} name={Math.random()} onChange={this.onButtonPressed.bind(this, name)}/> <input type="radio" checked={selected} name={Math.random()}
onChange={this.onButtonPressed.bind(this, name)}/>
{name} {name}
</label> </label>
</div> </div>
@@ -57,7 +62,13 @@ export default class ProficiencyFilter extends React.Component {
return ( return (
<div> <div>
<div style={{textAlign: 'center', background: 'lightgray', width: '100%', display: 'block', borderBottom: '1px solid grey'}}> <div style={{
textAlign: 'center',
background: 'lightgray',
width: '100%',
display: 'block',
borderBottom: '1px solid grey'
}}>
<b>Custom Proficiency Filter</b> <b>Custom Proficiency Filter</b>
</div> </div>
{rows} {rows}

223
src/richGridExample/RefData.js
View File

@@ -1,127 +1,128 @@
export default class RefData {} export default class RefData {
}
RefData.FIRST_NAMES = [ RefData.FIRST_NAMES = [
"Sophie", "Isabelle", "Emily", "Olivia", "Lily", "Chloe", "Isabella", "Sophie", "Isabelle", "Emily", "Olivia", "Lily", "Chloe", "Isabella",
"Amelia", "Jessica", "Sophia", "Ava", "Charlotte", "Mia", "Lucy", "Grace", "Ruby", "Amelia", "Jessica", "Sophia", "Ava", "Charlotte", "Mia", "Lucy", "Grace", "Ruby",
"Ella", "Evie", "Freya", "Isla", "Poppy", "Daisy", "Layla" "Ella", "Evie", "Freya", "Isla", "Poppy", "Daisy", "Layla"
]; ];
RefData.LAST_NAMES = [ RefData.LAST_NAMES = [
"Beckham", "Black", "Braxton", "Brennan", "Brock", "Bryson", "Cadwell", "Beckham", "Black", "Braxton", "Brennan", "Brock", "Bryson", "Cadwell",
"Cage", "Carson", "Chandler", "Cohen", "Cole", "Corbin", "Dallas", "Dalton", "Dane", "Cage", "Carson", "Chandler", "Cohen", "Cole", "Corbin", "Dallas", "Dalton", "Dane",
"Donovan", "Easton", "Fisher", "Fletcher", "Grady", "Greyson", "Griffin", "Gunner", "Donovan", "Easton", "Fisher", "Fletcher", "Grady", "Greyson", "Griffin", "Gunner",
"Hayden", "Hudson", "Hunter", "Jacoby", "Jagger", "Jaxon", "Jett", "Kade", "Kane", "Hayden", "Hudson", "Hunter", "Jacoby", "Jagger", "Jaxon", "Jett", "Kade", "Kane",
"Keating", "Keegan", "Kingston", "Kobe" "Keating", "Keegan", "Kingston", "Kobe"
]; ];
RefData.COUNTRY_CODES = { RefData.COUNTRY_CODES = {
Ireland: "ie", Ireland: "ie",
Spain: "es", Spain: "es",
"United Kingdom": "gb", "United Kingdom": "gb",
France: "fr", France: "fr",
Germany: "de", Germany: "de",
Sweden: "se", Sweden: "se",
Italy: "it", Italy: "it",
Greece: "gr", Greece: "gr",
Iceland: "is", Iceland: "is",
Portugal: "pt", Portugal: "pt",
Malta: "mt", Malta: "mt",
Norway: "no", Norway: "no",
Brazil: "br", Brazil: "br",
Argentina: "ar", Argentina: "ar",
Colombia: "co", Colombia: "co",
Peru: "pe", Peru: "pe",
Venezuela: "ve", Venezuela: "ve",
Uruguay: "uy" Uruguay: "uy"
}; };
RefData.COUNTRIES = [ RefData.COUNTRIES = [
{country: "Ireland", continent: "Europe", language: "English"}, {country: "Ireland", continent: "Europe", language: "English"},
{country: "Spain", continent: "Europe", language: "Spanish"}, {country: "Spain", continent: "Europe", language: "Spanish"},
{country: "United Kingdom", continent: "Europe", language: "English"}, {country: "United Kingdom", continent: "Europe", language: "English"},
{country: "France", continent: "Europe", language: "French"}, {country: "France", continent: "Europe", language: "French"},
{country: "Germany", continent: "Europe", language: "(other)"}, {country: "Germany", continent: "Europe", language: "(other)"},
{country: "Sweden", continent: "Europe", language: "(other)"}, {country: "Sweden", continent: "Europe", language: "(other)"},
{country: "Norway", continent: "Europe", language: "(other)"}, {country: "Norway", continent: "Europe", language: "(other)"},
{country: "Italy", continent: "Europe", language: "(other)"}, {country: "Italy", continent: "Europe", language: "(other)"},
{country: "Greece", continent: "Europe", language: "(other)"}, {country: "Greece", continent: "Europe", language: "(other)"},
{country: "Iceland", continent: "Europe", language: "(other)"}, {country: "Iceland", continent: "Europe", language: "(other)"},
{country: "Portugal", continent: "Europe", language: "Portuguese"}, {country: "Portugal", continent: "Europe", language: "Portuguese"},
{country: "Malta", continent: "Europe", language: "(other)"}, {country: "Malta", continent: "Europe", language: "(other)"},
{country: "Brazil", continent: "South America", language: "Portuguese"}, {country: "Brazil", continent: "South America", language: "Portuguese"},
{country: "Argentina", continent: "South America", language: "Spanish"}, {country: "Argentina", continent: "South America", language: "Spanish"},
{country: "Colombia", continent: "South America", language: "Spanish"}, {country: "Colombia", continent: "South America", language: "Spanish"},
{country: "Peru", continent: "South America", language: "Spanish"}, {country: "Peru", continent: "South America", language: "Spanish"},
{country: "Venezuela", continent: "South America", language: "Spanish"}, {country: "Venezuela", continent: "South America", language: "Spanish"},
{country: "Uruguay", continent: "South America", language: "Spanish"} {country: "Uruguay", continent: "South America", language: "Spanish"}
]; ];
RefData.DOB = [ RefData.DOB = [
new Date(2000, 0, 1 ), new Date(2000, 0, 1),
new Date(2001, 1, 2 ), new Date(2001, 1, 2),
new Date(2002, 2, 3 ), new Date(2002, 2, 3),
new Date(2003, 3, 4 ), new Date(2003, 3, 4),
new Date(2004, 4, 5 ), new Date(2004, 4, 5),
new Date(2005, 5, 6 ), new Date(2005, 5, 6),
new Date(2006, 6, 7 ), new Date(2006, 6, 7),
new Date(2007, 7, 8 ), new Date(2007, 7, 8),
new Date(2008, 8, 9 ), new Date(2008, 8, 9),
new Date(2009, 9, 10 ), new Date(2009, 9, 10),
new Date(2010, 10, 11 ), new Date(2010, 10, 11),
new Date(2011, 11, 12 ) new Date(2011, 11, 12)
]; ];
RefData.ADDRESSES = [ RefData.ADDRESSES = [
'1197 Thunder Wagon Common, Cataract, RI, 02987-1016, US, (401) 747-0763', '1197 Thunder Wagon Common, Cataract, RI, 02987-1016, US, (401) 747-0763',
'3685 Rocky Glade, Showtucket, NU, X1E-9I0, CA, (867) 371-4215', '3685 Rocky Glade, Showtucket, NU, X1E-9I0, CA, (867) 371-4215',
'3235 High Forest, Glen Campbell, MS, 39035-6845, US, (601) 638-8186', '3235 High Forest, Glen Campbell, MS, 39035-6845, US, (601) 638-8186',
'2234 Sleepy Pony Mall , Drain, DC, 20078-4243, US, (202) 948-3634', '2234 Sleepy Pony Mall , Drain, DC, 20078-4243, US, (202) 948-3634',
'2722 Hazy Turnabout, Burnt Cabins, NY, 14120-5642, US, (917) 604-6597', '2722 Hazy Turnabout, Burnt Cabins, NY, 14120-5642, US, (917) 604-6597',
'6686 Lazy Ledge, Two Rock, CA, 92639-3020, US, (619) 901-9911', '6686 Lazy Ledge, Two Rock, CA, 92639-3020, US, (619) 901-9911',
'2000 Dewy Limits, Wacahoota, NF, A4L-2V9, CA, (709) 065-3959', '2000 Dewy Limits, Wacahoota, NF, A4L-2V9, CA, (709) 065-3959',
'7710 Noble Pond Avenue, Bolivia, RI, 02931-1842, US, (401) 865-2160', '7710 Noble Pond Avenue, Bolivia, RI, 02931-1842, US, (401) 865-2160',
'3452 Sunny Vale, Pyro, ON, M8V-4Z0, CA, (519) 072-8609', '3452 Sunny Vale, Pyro, ON, M8V-4Z0, CA, (519) 072-8609',
'4402 Dusty Cove, Many Farms, UT, 84853-8223, US, (435) 518-0673', '4402 Dusty Cove, Many Farms, UT, 84853-8223, US, (435) 518-0673',
'5198 Silent Parade, Round Bottom, MD, 21542-9798, US, (301) 060-7245', '5198 Silent Parade, Round Bottom, MD, 21542-9798, US, (301) 060-7245',
'8550 Shady Moor, Kitty Fork, CO, 80941-6207, US, (303) 502-3767', '8550 Shady Moor, Kitty Fork, CO, 80941-6207, US, (303) 502-3767',
'2131 Old Dell, Merry Midnight, AK, 99906-8842, US, (907) 369-2206', '2131 Old Dell, Merry Midnight, AK, 99906-8842, US, (907) 369-2206',
'7390 Harvest Crest, Mosquito Crossing, RI, 02957-6116, US, (401) 463-6348', '7390 Harvest Crest, Mosquito Crossing, RI, 02957-6116, US, (401) 463-6348',
'874 Little Point, Hot Coffee, BC, V3U-2P6, CA, (250) 706-9207', '874 Little Point, Hot Coffee, BC, V3U-2P6, CA, (250) 706-9207',
'8834 Stony Pioneer Heights, Newlove, OR, 97419-8670, US, (541) 408-2213', '8834 Stony Pioneer Heights, Newlove, OR, 97419-8670, US, (541) 408-2213',
'9829 Grand Beach, Flint, UT, 84965-9900, US, (435) 700-5161', '9829 Grand Beach, Flint, UT, 84965-9900, US, (435) 700-5161',
'3799 Cozy Blossom Ramp, Ptarmigan, MS, 38715-0313, US, (769) 740-1526', '3799 Cozy Blossom Ramp, Ptarmigan, MS, 38715-0313, US, (769) 740-1526',
'3254 Silver Island Loop, Maunaloa, DE, 19869-3169, US, (302) 667-7671', '3254 Silver Island Loop, Maunaloa, DE, 19869-3169, US, (302) 667-7671',
'1081 Middle Wood, Taylors Gut Landing, OR, 97266-2873, US, (541) 357-6310', '1081 Middle Wood, Taylors Gut Landing, OR, 97266-2873, US, (541) 357-6310',
'1137 Umber Trail, Shacktown, NW, X3U-5Y8, CA, (867) 702-6883', '1137 Umber Trail, Shacktown, NW, X3U-5Y8, CA, (867) 702-6883',
'9914 Hidden Bank, Wyoming, MO, 64635-9665, US, (636) 280-4192', '9914 Hidden Bank, Wyoming, MO, 64635-9665, US, (636) 280-4192',
'7080 Misty Nectar Townline, Coward, AB, T9U-3N4, CA, (403) 623-2838', '7080 Misty Nectar Townline, Coward, AB, T9U-3N4, CA, (403) 623-2838',
'1184 Wishing Grounds, Vibank, NW, X7D-0V9, CA, (867) 531-2730', '1184 Wishing Grounds, Vibank, NW, X7D-0V9, CA, (867) 531-2730',
'126 Easy Pointe, Grandview Beach, KY, 40928-9539, US, (502) 548-0956', '126 Easy Pointe, Grandview Beach, KY, 40928-9539, US, (502) 548-0956',
'6683 Colonial Street, Swan River, BC, V1A-9I8, CA, (778) 014-4257', '6683 Colonial Street, Swan River, BC, V1A-9I8, CA, (778) 014-4257',
'960 Gentle Oak Lane, Shakopee, ND, 58618-6277, US, (701) 327-1219', '960 Gentle Oak Lane, Shakopee, ND, 58618-6277, US, (701) 327-1219',
'6918 Cotton Pine Corner, Kenaston, IA, 52165-3975, US, (515) 906-7427', '6918 Cotton Pine Corner, Kenaston, IA, 52165-3975, US, (515) 906-7427',
'2368 Burning Woods, Ernfold, NY, 11879-9186, US, (646) 819-0355', '2368 Burning Woods, Ernfold, NY, 11879-9186, US, (646) 819-0355',
'5646 Quiet Shadow Chase, Tiger Tail, IA, 52283-5537, US, (712) 375-9225', '5646 Quiet Shadow Chase, Tiger Tail, IA, 52283-5537, US, (712) 375-9225',
'5466 Foggy Mountain Dale, Sweet Home, MT, 59738-0251, US, (406) 881-1706', '5466 Foggy Mountain Dale, Sweet Home, MT, 59738-0251, US, (406) 881-1706',
'5313 Clear Willow Route, Amazon, BC, V0S-2S6, CA, (604) 340-7596', '5313 Clear Willow Route, Amazon, BC, V0S-2S6, CA, (604) 340-7596',
'7000 Pleasant Autoroute, Spaceport City, UT, 84749-2448, US, (435) 154-3360', '7000 Pleasant Autoroute, Spaceport City, UT, 84749-2448, US, (435) 154-3360',
'8359 Quaking Anchor Road, Gross, BC, V9O-0H5, CA, (250) 985-3859', '8359 Quaking Anchor Road, Gross, BC, V9O-0H5, CA, (250) 985-3859',
'5143 Amber Deer Hollow, New Deal, ND, 58446-0853, US, (701) 927-0322', '5143 Amber Deer Hollow, New Deal, ND, 58446-0853, US, (701) 927-0322',
'6230 Jagged Bear Key, Young, AR, 72337-3811, US, (501) 805-7239', '6230 Jagged Bear Key, Young, AR, 72337-3811, US, (501) 805-7239',
'7207 Heather Vista, Devon, WY, 82520-1771, US, (307) 358-7092', '7207 Heather Vista, Devon, WY, 82520-1771, US, (307) 358-7092',
'9416 Red Rise Place, Spraytown, OK, 73809-4766, US, (580) 867-1973', '9416 Red Rise Place, Spraytown, OK, 73809-4766, US, (580) 867-1973',
'3770 Golden Horse Diversion, Yelland, IL, 60471-1487, US, (224) 717-9349', '3770 Golden Horse Diversion, Yelland, IL, 60471-1487, US, (224) 717-9349',
'4819 Honey Treasure Park, Alaska, NB, E1U-3I0, CA, (506) 656-9138', '4819 Honey Treasure Park, Alaska, NB, E1U-3I0, CA, (506) 656-9138',
'6187 Round Front, Land O Lakes, AK, 99873-6403, US, (907) 853-9063', '6187 Round Front, Land O Lakes, AK, 99873-6403, US, (907) 853-9063',
'9218 Crystal Highway, Pickelville, MT, 59847-9299, US, (406) 076-0024', '9218 Crystal Highway, Pickelville, MT, 59847-9299, US, (406) 076-0024',
'6737 Bright Quay, Lazy Mountain, KY, 42390-4772, US, (606) 256-7288', '6737 Bright Quay, Lazy Mountain, KY, 42390-4772, US, (606) 256-7288',
'237 Merry Campus, Twentysix, SC, 29330-4909, US, (864) 945-0157', '237 Merry Campus, Twentysix, SC, 29330-4909, US, (864) 945-0157',
'446 Fallen Gate Rise, Petrolia, SC, 29959-9527, US, (864) 826-0553', '446 Fallen Gate Rise, Petrolia, SC, 29959-9527, US, (864) 826-0553',
'2347 Indian Boulevard, Frisbee, VA, 23797-6458, US, (703) 656-8445', '2347 Indian Boulevard, Frisbee, VA, 23797-6458, US, (703) 656-8445',
'365 Emerald Grove Line, Level, NC, 28381-1514, US, (919) 976-7958', '365 Emerald Grove Line, Level, NC, 28381-1514, US, (919) 976-7958',
'1207 Iron Extension, Klickitat, SC, 29197-8571, US, (803) 535-7888', '1207 Iron Extension, Klickitat, SC, 29197-8571, US, (803) 535-7888',
'6770 Cinder Glen, Caronport, OH, 45053-5002, US, (440) 369-4018', '6770 Cinder Glen, Caronport, OH, 45053-5002, US, (440) 369-4018',
'7619 Tawny Carrefour, Senlac, NV, 89529-9876, US, (775) 901-6433']; '7619 Tawny Carrefour, Senlac, NV, 89529-9876, US, (775) 901-6433'];
RefData.IT_SKILLS = ['android', 'css', 'html5', 'mac', 'windows']; RefData.IT_SKILLS = ['android', 'css', 'html5', 'mac', 'windows'];

5
src/richGridExample/RichGridExample.jsx
View File

@@ -140,10 +140,11 @@ export default class RichGridExample extends Component {
<button onClick={this.setCountryVisible.bind(this, true)} className="btn btn-primary">Show Country Column</button> <button onClick={this.setCountryVisible.bind(this, true)} className="btn btn-primary">Show Country Column</button>
</span> </span>
</div> </div>
<div style={{display: "inline-block",width: "100%", marginTop: 10, marginBottom: 10}}> <div style={{display: "inline-block", width: "100%", marginTop: 10, marginBottom: 10}}>
<div style={{float: "left"}}> <div style={{float: "left"}}>
<label> <label>
<input type="checkbox" onChange={this.onToggleToolPanel.bind(this)} style={{marginRight: 5}}/> <input type="checkbox" onChange={this.onToggleToolPanel.bind(this)}
style={{marginRight: 5}}/>
Show Tool Panel Show Tool Panel
</label> </label>
</div> </div>

10
src/richGridExample/RowDataFactory.js
View File

@@ -3,10 +3,10 @@ import RefData from './RefData';
export default class RowDataFactory { export default class RowDataFactory {
createRowData() { createRowData() {
var rowData = []; const rowData = [];
for (var i = 0; i < 200; i++) { for (let i = 0; i < 200; i++) {
var countryData = RefData.COUNTRIES[i % RefData.COUNTRIES.length]; const countryData = RefData.COUNTRIES[i % RefData.COUNTRIES.length];
rowData.push({ rowData.push({
name: RefData.FIRST_NAMES[i % RefData.FIRST_NAMES.length] + ' ' + RefData.LAST_NAMES[i % RefData.LAST_NAMES.length], name: RefData.FIRST_NAMES[i % RefData.FIRST_NAMES.length] + ' ' + RefData.LAST_NAMES[i % RefData.LAST_NAMES.length],
skills: { skills: {
@@ -32,8 +32,8 @@ export default class RowDataFactory {
} }
createRandomPhoneNumber() { createRandomPhoneNumber() {
var result = '+'; let result = '+';
for (var i = 0; i < 12; i++) { for (let i = 0; i < 12; i++) {
result += Math.round(Math.random() * 10); result += Math.round(Math.random() * 10);
if (i === 2 || i === 5 || i === 8) { if (i === 2 || i === 5 || i === 8) {
result += ' '; result += ' ';

8
src/richGridExample/SkillsCellRenderer.jsx
View File

@@ -5,11 +5,11 @@ import RefData from './RefData';
export default class SkillsCellRenderer extends React.Component { export default class SkillsCellRenderer extends React.Component {
render() { render() {
var skills = []; const skills = [];
var rowData = this.props.data; const rowData = this.props.data;
RefData.IT_SKILLS.forEach( (skill) => { RefData.IT_SKILLS.forEach((skill) => {
if (rowData && rowData.skills && rowData.skills[skill]) { if (rowData && rowData.skills && rowData.skills[skill]) {
skills.push(<img key={skill} src={'images/skills/' + skill + '.png'} width={16} title={skill} />); skills.push(<img key={skill} src={'images/skills/' + skill + '.png'} width={16} title={skill}/>);
} }
}); });

16
src/richGridExample/SkillsFilter.jsx
View File

@@ -42,8 +42,8 @@ export default class SkillsFilter extends React.Component {
// called by agGrid // called by agGrid
doesFilterPass(params) { doesFilterPass(params) {
var rowSkills = params.data.skills; const rowSkills = params.data.skills;
var passed = true; let passed = true;
RefData.IT_SKILLS.forEach((skill) => { RefData.IT_SKILLS.forEach((skill) => {
if (this.state[skill]) { if (this.state[skill]) {
@@ -62,14 +62,14 @@ export default class SkillsFilter extends React.Component {
// called by agGrid // called by agGrid
isFilterActive() { isFilterActive() {
var somethingSelected = this.state.android || this.state.css || const somethingSelected = this.state.android || this.state.css ||
this.state.html5 || this.state.mac || this.state.windows; this.state.html5 || this.state.mac || this.state.windows;
return somethingSelected; return somethingSelected;
}; };
onSkillChanged(skill, event) { onSkillChanged(skill, event) {
var newValue = event.target.checked; const newValue = event.target.checked;
var newModel = {}; const newModel = {};
newModel[skill] = newValue; newModel[skill] = newValue;
// set the state, and once it is done, then call filterChangedCallback // set the state, and once it is done, then call filterChangedCallback
this.setState(newModel, this.props.filterChangedCallback); this.setState(newModel, this.props.filterChangedCallback);
@@ -81,11 +81,11 @@ export default class SkillsFilter extends React.Component {
render() { render() {
var skillsTemplates = []; const skillsTemplates = [];
RefData.IT_SKILLS.forEach((skill, index) => { RefData.IT_SKILLS.forEach((skill, index) => {
var skillName = RefData.IT_SKILLS_NAMES[index]; const skillName = RefData.IT_SKILLS_NAMES[index];
var template = ( const template = (
<label key={skill} <label key={skill}
style={{border: '1px solid lightgrey', margin: 4, padding: 4, display: 'inline-block'}}> style={{border: '1px solid lightgrey', margin: 4, padding: 4, display: 'inline-block'}}>
<span> <span>

13
src/richGridExample/SortableHeaderComponent.jsx
View File

@@ -28,11 +28,14 @@ export default class SortableHeaderComponent extends React.Component {
let upArrowClass = "customSortUpLabel " + (this.state.sorted === 'asc' ? " active" : ""); let upArrowClass = "customSortUpLabel " + (this.state.sorted === 'asc' ? " active" : "");
let removeArrowClass = "customSortRemoveLabel " + (this.state.sorted === '' ? " active" : ""); let removeArrowClass = "customSortRemoveLabel " + (this.state.sorted === '' ? " active" : "");
sortElements.push(<div key={`up${this.props.displayName}`} className={downArrowClass} onClick={this.onSortRequested.bind(this, 'desc')}><i sortElements.push(<div key={`up${this.props.displayName}`} className={downArrowClass}
className="fa fa-long-arrow-down"/></div>) onClick={this.onSortRequested.bind(this, 'desc')}><i
sortElements.push(<div key={`down${this.props.displayName}`} className={upArrowClass} onClick={this.onSortRequested.bind(this, 'asc')}><i className="fa fa-long-arrow-down"/></div>);
className="fa fa-long-arrow-up"/></div>) sortElements.push(<div key={`down${this.props.displayName}`} className={upArrowClass}
sortElements.push(<div key={`minus${this.props.displayName}`} className={removeArrowClass} onClick={this.onSortRequested.bind(this, '')}><i onClick={this.onSortRequested.bind(this, 'asc')}><i
className="fa fa-long-arrow-up"/></div>);
sortElements.push(<div key={`minus${this.props.displayName}`} className={removeArrowClass}
onClick={this.onSortRequested.bind(this, '')}><i
className="fa fa-times"/></div>) className="fa fa-times"/></div>)
} }