;
- }
-
-}
\ No newline at end of file
diff --git a/src-grouped/ColDefFactory.jsx b/src-grouped/ColDefFactory.jsx
deleted file mode 100644
index b53d820..0000000
--- a/src-grouped/ColDefFactory.jsx
+++ /dev/null
@@ -1,17 +0,0 @@
-export default class ColDefFactory {
- createColDefs() {
- return [
- {headerName: "Athlete", field: "athlete", width: 200},
- {headerName: "Age", field: "age", width: 90},
- {headerName: "Gold", field: "gold", width: 100, aggFunc: 'sum'},
- {headerName: "Silver", field: "silver", width: 100, aggFunc: 'sum'},
- {headerName: "Bronze", field: "bronze", width: 100, aggFunc: 'sum'},
- {headerName: "Total", field: "total", width: 100, aggFunc: 'sum'},
- {headerName: "Country", field: "country", width: 120, rowGroupIndex: 0},
- {headerName: "Year", field: "year", width: 90},
- {headerName: "Date", field: "date", width: 110},
- {headerName: "Sport", field: "sport", width: 110}
- ];
- }
-}
-
diff --git a/src-grouped/index.js b/src-grouped/index.js
deleted file mode 100644
index 2c44f4d..0000000
--- a/src-grouped/index.js
+++ /dev/null
@@ -1,18 +0,0 @@
-'use strict';
-
-import ReactDOM from 'react-dom';
-import React from 'react';
-import MyApp from './myApp.jsx';
-// is there a better way of doing this?
-import 'ag-grid-root/dist/styles/ag-grid.css';
-import 'ag-grid-root/dist/styles/theme-fresh.css';
-
-// waiting for dom to load before booting react. we could alternatively
-// put the index.js reference at the end fo the index.html, but i prefer this way.
-document.addEventListener('DOMContentLoaded', ()=> {
- var container = document.getElementById('myAppContainer');
- ReactDOM.render(
- React.createElement(MyApp),
- container
- );
-});
diff --git a/src-grouped/myApp.css b/src-grouped/myApp.css
deleted file mode 100644
index 5e7e6f8..0000000
--- a/src-grouped/myApp.css
+++ /dev/null
@@ -1,28 +0,0 @@
-
-.ag-cell {
- padding-top: 2px !important;
- padding-bottom: 2px !important;
-}
-
-label {
- font-weight: normal !important;
-}
-
-.div-percent-bar {
- display: inline-block;
- height: 20px;
- position: relative;
-}
-
-.div-percent-value {
- position: absolute;
- padding-left: 4px;
- font-weight: bold;
- font-size: 13px;
-}
-
-.div-outer-div {
- display: inline-block;
- height: 100%;
- width: 100%;
-}
diff --git a/src-grouped/myApp.jsx b/src-grouped/myApp.jsx
deleted file mode 100644
index 5fc4c6a..0000000
--- a/src-grouped/myApp.jsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import React from "react";
-import {AgGridReact} from "ag-grid-react";
-import ColDefFactory from "./ColDefFactory.jsx";
-import "./myApp.css";
-
-// take this line out if you do not want to use ag-Grid-Enterprise
-import "ag-grid-enterprise";
-
-
-export default class MyApp extends React.Component {
-
- constructor() {
- super();
-
- this.state = {
- showToolPanel: false,
- columnDefs: new ColDefFactory().createColDefs(),
- rowData: null,
- };
-
- this.gridOptions = {
- groupRowInnerRenderer: function (params) {
- var FLAG_CODES = {
- 'Ireland': 'ie',
- 'United States': 'us',
- 'Russia': 'ru',
- 'Australia': 'au',
- 'Canada': 'ca',
- 'Norway': 'no',
- 'China': 'cn',
- 'Zimbabwe': 'zw',
- 'Netherlands': 'nl',
- 'South Korea': 'kr',
- 'Croatia': 'hr',
- 'France': 'fr'
- };
-
- var flagCode = FLAG_CODES[params.node.key];
-
- var html = '';
- if (flagCode) {
- html += ''
- }
-
- html += ' COUNTRY_NAME'.replace('COUNTRY_NAME', params.node.key);
- html += ' Gold: GOLD_COUNT'.replace('GOLD_COUNT', params.data.gold);
- html += ' Silver: SILVER_COUNT'.replace('SILVER_COUNT', params.data.silver);
- html += ' Bronze: BRONZE_COUNT'.replace('BRONZE_COUNT', params.data.bronze);
-
- return html;
- }
- };
- }
-
- onGridReady(params) {
- this.api = params.api;
- this.columnApi = params.columnApi;
-
- var that = this;
- var httpRequest = new XMLHttpRequest();
- httpRequest.open('GET', '/olympicWinners.json');
- httpRequest.send();
- httpRequest.onreadystatechange = function() {
- if (httpRequest.readyState == 4 && httpRequest.status == 200) {
- var httpResult = JSON.parse(httpRequest.responseText);
- that.api.setRowData(httpResult);
- }
- };
-
- }
-
- render() {
- var gridTemplate = (
-
-
-
- );
-
- return
-
- {gridTemplate}
-
-
;
- }
-
-}
diff --git a/src-standard/ColDefFactory.jsx b/src-standard/ColDefFactory.jsx
deleted file mode 100644
index d68d513..0000000
--- a/src-standard/ColDefFactory.jsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import SkillsCellRenderer from './SkillsCellRenderer.jsx';
-import NameCellEditor from './NameCellEditor.jsx';
-import ProficiencyCellRenderer from './ProficiencyCellRenderer.jsx';
-import RefData from './RefData';
-import SkillsFilter from './SkillsFilter.jsx';
-import ProficiencyFilter from './ProficiencyFilter.jsx';
-import MyReactHeaderGroupComponent from './MyReactHeaderGroupComponent.jsx';
-
-export default class ColDefFactory {
-
- createColDefs() {
-
- var columnDefs = [
- {headerName: '#', width: 30, checkboxSelection: true, suppressSorting: true,
- suppressMenu: true, pinned: true},
- {
- headerName: 'Employee',
- headerGroupComponentFramework: MyReactHeaderGroupComponent,
- children: [
- {
- headerName: "Name", field: "name", enableRowGroup: true, enablePivot: true,
- width: 150, pinned: true, editable: true,
- // use a React cellEditor
- cellEditorFramework: NameCellEditor
- }, {
- headerName: "Country", field: "country", width: 150, enableRowGroup: true, enablePivot: true,
- // an example of using a non-React cell renderer
- cellRenderer: countryCellRenderer, pinned: true,
- filterParams: {
- cellRenderer: countryCellRenderer, cellHeight: 20
- }, columnGroupShow: 'open'
- }, {
- headerName: "DOB", field: "dob", width: 110, enableRowGroup: true, enablePivot: true, filter:'date',
- pinned: true, cellRenderer: function(params) {
- return pad(params.value.getDate(), 2) + '/' +
- pad(params.value.getMonth() + 1, 2)+ '/' +
- params.value.getFullYear();
- }, columnGroupShow: 'open'
- }
- ]
- },
- {
- headerName: 'IT Skills',
- children: [
- {headerName: "Skills", width: 125, suppressSorting: true, field: 'skills', enableRowGroup: true, enablePivot: true,
- // supply a React component
- cellRendererFramework: SkillsCellRenderer,
- // supply a React component
- filterFramework: SkillsFilter
- },
- {headerName: "Proficiency", field: "proficiency", width: 135, enableValue: true,
- // supply a React component
- cellRendererFramework: ProficiencyCellRenderer,
- // supply a React component
- filterFramework: ProficiencyFilter
- }
- ]
- },
- {
- headerName: 'Contact',
- children: [
- {headerName: "Mobile", field: "mobile", width: 150, filter: 'text'},
- {headerName: "Land-line", field: "landline", width: 150, filter: 'text'},
- {headerName: "Address", field: "address", width: 500, filter: 'text'}
- ]
- }
- ];
- return columnDefs;
- }
-}
-
-// this is a simple cell renderer, putting together static html, no
-// need to use React for it.
-function countryCellRenderer(params) {
- if (params.value) {
- var flag = "";
- return flag + " " + params.value;
- } else {
- return null;
- }
-}
-
-//Utility function used to pad the date formatting.
-function pad(num, totalStringSize) {
- let asString = num + "";
- while (asString.length < totalStringSize) asString = "0" + asString;
- return asString;
-}
diff --git a/src-standard/MyReactDateComponent.jsx b/src-standard/MyReactDateComponent.jsx
deleted file mode 100644
index d298abc..0000000
--- a/src-standard/MyReactDateComponent.jsx
+++ /dev/null
@@ -1,167 +0,0 @@
-import React from 'react';
-
-// Date Component to be used in the date filter.
-// This is a very simple example of how a React component can be plugged as a DateComponentFramework
-// as you can see, the only requirement is that the React component implements the required methods
-// getDate and setDate and that it calls back into props.onDateChanged every time that the date changes.
-export default class MyReactDateComponent extends React.Component {
-
- constructor(props) {
- super(props);
- //The state of this component is represented of:
- // The current date it holds, null by default, null if the date typed by the user is not valid or fields are blank
- // The current values that the user types in the input boxes, by default ''
-
- //The textBoxes state is necessary since it can be set from ag-Grid. This can be seen in this example through
- // the usage of the button DOB equals to 01/01/2000 in the example page.
- this.state = {
- date: null,
- textBoxes: {
- dd: '',
- mm: '',
- yyyy: ''
- }
- }
- }
-
- render() {
- //Inlining styles to make simpler the component
- let filterStyle = {
- margin:'2px'
- };
- let ddStyle = {
- width: '30px'
- };
- let mmStyle = {
- width: '30px'
- };
- let yyyyStyle = {
- width: '60px'
- };
- let resetStyle = {
- padding: '2px',
- backgroundColor: 'red',
- borderRadius: '3px',
- fontSize: '10px',
- marginRight: '5px',
- color: 'white'
- };
-
- return (
-
- x
- /
- /
-
-
- );
- }
-
- //*********************************************************************************
- // METHODS REQUIRED BY AG-GRID
- //*********************************************************************************
-
- getDate (){
- //ag-grid will call us here when in need to check what the current date value is hold by this
- //component.
- return this.state.date;
- }
-
- setDate (date){
- //ag-grid will call us here when it needs this component to update the date that it holds.
- this.setState({
- date:date,
- textBoxes:{
- dd: date.getDate(),
- mm: date.getMonth() + 1,
- yyyy: date.getFullYear()
- }
- })
- }
-
- //*********************************************************************************
- // LINKS THE INTERNAL STATE AND AG-GRID
- //*********************************************************************************
-
- updateAndNotifyAgGrid (date, textBoxes){
- this.setState ({
- date: date,
- textBoxes:textBoxes
- },
- //Callback after the state is set. This is where we tell ag-grid that the date has changed so
- //it will proceed with the filtering and we can then expect ag-Grid to call us back to getDate
- this.props.onDateChanged
- );
- }
-
-
- //*********************************************************************************
- // LINKING THE UI, THE STATE AND AG-GRID
- //*********************************************************************************
-
- resetDate (){
- let date = null;
- let textBoxes = {
- dd : '',
- mm : '',
- yyyy : '',
- };
-
- this.updateAndNotifyAgGrid(date, textBoxes)
- }
-
- onDateChanged () {
- let date = this.parseDate(this.refs.dd.value, this.refs.mm.value, this.refs.yyyy.value);
- let textBoxes = {
- dd : this.refs.dd.value,
- mm : this.refs.mm.value,
- yyyy : this.refs.yyyy.value,
- };
-
- this.updateAndNotifyAgGrid(date, textBoxes)
- }
-
- //*********************************************************************************
- // INTERNAL LOGIC
- //*********************************************************************************
-
- parseDate (dd, mm, yyyy){
- //If any of the three input date fields are empty, stop and return null
- if (dd.trim() === '' || mm.trim() === '' || yyyy.trim() === '') {
- return null;
- }
-
- let day = Number(dd);
- let month = Number(mm);
- let year = Number(yyyy);
-
- let date = new Date(year, month - 1, day);
-
- //If the date is not valid
- if (isNaN(date.getTime())){
- return null;
- }
-
- //Given that new Date takes any garbage in, it is possible for the user to specify a new Date
- //like this (-1, 35, 1) and it will return a valid javascript date. In this example, it will
- //return Sat Dec 01 1 00:00:00 GMT+0000 (GMT) - Go figure...
- //To ensure that we are not letting non sensical dates to go through we check that the resultant
- //javascript date parts (month, year and day) match the given date fields provided as parameters.
- //If the javascript date parts don't match the provided fields, we assume that the input is non
- //sensical... ie: Day=-1 or month=14, if this is the case, we return null
- //This also protects us from non sensical dates like dd=31, mm=2 of any year
- if (date.getDate() != day || date.getMonth() + 1 != month || date.getFullYear() != year){
- return null;
- }
-
- return date;
- }
-}
-
-// the grid will always pass in one props called 'params',
-// which is the grid passing you the params for the cellRenderer.
-// this piece is optional. the grid will always pass the 'params'
-// props, so little need for adding this validation meta-data.
-MyReactDateComponent.propTypes = {
- params: React.PropTypes.object
-};
\ No newline at end of file
diff --git a/src-standard/MyReactHeaderComponent.jsx b/src-standard/MyReactHeaderComponent.jsx
deleted file mode 100644
index 2c5d098..0000000
--- a/src-standard/MyReactHeaderComponent.jsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import React from 'react';
-
-// Header component to be used as default for all the columns.
-export default class MyReactHeaderComponent extends React.Component {
-
- constructor(props) {
- super(props);
-
- this.props.column.addEventListener('sortChanged', this.onSortChanged.bind(this));
-
- //The state of this component contains the current sort state of this column
- //The possible values are: 'asc', 'desc' and ''
- this.state = {
- sorted: ''
- }
- }
-
-
- render() {
- let sortElements = [];
- if (this.props.enableSorting){
- let downArrowClass = "customSortDownLabel " + (this.state.sorted === 'desc' ? " active" : "");
- let upArrowClass = "customSortUpLabel " + (this.state.sorted === 'asc' ? " active" : "");
- let removeArrowClass = "customSortRemoveLabel " + (this.state.sorted === '' ? " active" : "");
-
- sortElements.push(
)
- sortElements.push(
)
- sortElements.push(
)
- }
-
-
- let menuButton = null;
- if (this.props.enableMenu){
- menuButton =
- }
-
- return
- {menuButton}
-
{this.props.displayName}
- {sortElements}
-
- }
-
- onSortRequested (order, event) {
- this.props.setSort (order, event.shiftKey);
- };
-
- onSortChanged (){
- if (this.props.column.isSortAscending()){
- this.setState({
- sorted: 'asc'
- })
- } else if (this.props.column.isSortDescending()){
- this.setState({
- sorted: 'desc'
- })
- } else {
- this.setState({
- sorted: ''
- })
- }
- };
-
- onMenuClick (){
- this.props.showColumnMenu (this.refs.menuButton);
- };
-
-}
-
-// the grid will always pass in one props called 'params',
-// which is the grid passing you the params for the cellRenderer.
-// this piece is optional. the grid will always pass the 'params'
-// props, so little need for adding this validation meta-data.
-MyReactHeaderComponent.propTypes = {
- params: React.PropTypes.object
-};
\ No newline at end of file
diff --git a/src-standard/MyReactHeaderGroupComponent.jsx b/src-standard/MyReactHeaderGroupComponent.jsx
deleted file mode 100644
index 7fe3037..0000000
--- a/src-standard/MyReactHeaderGroupComponent.jsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react';
-
-// Header component to be used as default for all the columns.
-export default class MyReactHeaderGroupComponent extends React.Component {
-
- constructor(props) {
- super(props);
- this.props.columnGroup.getOriginalColumnGroup().addEventListener('expandedChanged', this.onExpandChanged.bind(this));
- this.state = {
- expanded:null
- }
- this.onExpandChanged();
- }
-
- render() {
- let arrowClassName = "customExpandButton " + (this.state.expanded ? " expanded": " collapsed");
-
- return
-
{this.props.displayName}
-
-
- }
-
- expandOrCollapse (){
- this.props.setExpanded(!this.state.expanded);
- };
-
- onExpandChanged (){
- this.setState({
- expanded: this.props.columnGroup.getOriginalColumnGroup().isExpanded()
- })
- }
-}
-
-// the grid will always pass in one props called 'params',
-// which is the grid passing you the params for the cellRenderer.
-// this piece is optional. the grid will always pass the 'params'
-// props, so little need for adding this validation meta-data.
-MyReactHeaderGroupComponent.propTypes = {
- params: React.PropTypes.object
-};
\ No newline at end of file
diff --git a/src-standard/NameCellEditor.jsx b/src-standard/NameCellEditor.jsx
deleted file mode 100644
index 2433631..0000000
--- a/src-standard/NameCellEditor.jsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import React from 'react';
-import RefData from './RefData';
-
-var KEY_BACKSPACE = 8;
-var KEY_DELETE = 46;
-var KEY_F2 = 113;
-
-// cell renderer for the proficiency column. this is a very basic cell editor,
-export default class NameCellEditor extends React.Component {
-
- constructor(props) {
- super(props);
- // the entire ag-Grid properties are passed as one single object inside the params
- this.state = this.createInitialState(props);
- }
-
- // work out how to present the data based on what the user hit. you don't need to do any of
- // this for your ag-Grid cellEditor to work, however it makes sense to do this so the user
- // experience is similar to Excel
- createInitialState(props) {
-
- var startValue;
- var putCursorAtEndOnFocus = false;
- var highlightAllOnFocus = false;
-
- if (props.keyPress === KEY_BACKSPACE || props.keyPress === KEY_DELETE) {
- // if backspace or delete pressed, we clear the cell
- startValue = '';
- } else if (props.charPress) {
- // if a letter was pressed, we start with the letter
- startValue = props.charPress;
- } else {
- // otherwise we start with the current value
- startValue = props.value;
- if (props.keyPress === KEY_F2) {
- this.putCursorAtEndOnFocus = true;
- } else {
- this.highlightAllOnFocus = true;
- }
- }
-
- return {
- value: startValue,
- putCursorAtEndOnFocus: putCursorAtEndOnFocus,
- highlightAllOnFocus: highlightAllOnFocus
- }
- }
-
- render() {
- return (
-
- );
- }
-
- onChangeListener(event) {
- // 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.
- var newState = {
- value: event.target.value,
- putCursorAtEndOnFocus: this.state.putCursorAtEndOnFocus,
- highlightAllOnFocus: this.state.highlightAllOnFocus
- };
- this.setState(newState);
- }
-
- // called by ag-Grid, to get the final value
- getValue() {
- return this.state.value;
- }
-
- // cannot use componentDidMount because although the component might be ready from React's point of
- // view, it may not yet be in the browser (put in by ag-Grid) so focus will not work
- afterGuiAttached() {
- // get ref from React component
- var eInput = this.refs.textField;
- eInput.focus();
- if (this.highlightAllOnFocus) {
- eInput.select();
- } else {
- // when we started editing, we want the carot at the end, not the start.
- // 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
- // was placed after the first character, thus 'apply' would end up as 'pplea'
- var length = eInput.value ? eInput.value.length : 0;
- if (length > 0) {
- eInput.setSelectionRange(length, length);
- }
- }
- }
-
- // if we want the editor to appear in a popup, then return true.
- isPopup() {
- return false;
- }
-
- // return true here if you don't want to allow editing on the cell.
- isCancelBeforeStart() {
- return false;
- }
-
- // just to demonstrate, if you type in 'cancel' then the edit will not take effect
- isCancelAfterEnd() {
- if (this.state.value && this.state.value.toUpperCase()==='CANCEL') {
- return true;
- } else {
- return false;
- }
- }
-}
-
-// the grid will always pass in one props called 'params',
-// which is the grid passing you the params for the cellRenderer.
-// this piece is optional. the grid will always pass the 'params'
-// props, so little need for adding this validation meta-data.
-NameCellEditor.propTypes = {
- params: React.PropTypes.object
-};
\ No newline at end of file
diff --git a/src-standard/ProficiencyCellRenderer.jsx b/src-standard/ProficiencyCellRenderer.jsx
deleted file mode 100644
index 5bc412b..0000000
--- a/src-standard/ProficiencyCellRenderer.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import RefData from './RefData';
-
-// 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
-// html as a normal ag-Grid cellRenderer.
-export default class ProficiencyCellRenderer extends React.Component {
-
- render() {
- var backgroundColor;
- if (this.props.value < 20) {
- backgroundColor = 'red';
- } else if (this.props.value < 60) {
- backgroundColor = '#ff9900';
- } else {
- backgroundColor = '#00A000';
- }
-
- return (
-
-
{this.props.value}%
-
- );
- }
-}
diff --git a/src-standard/ProficiencyFilter.jsx b/src-standard/ProficiencyFilter.jsx
deleted file mode 100644
index 5925031..0000000
--- a/src-standard/ProficiencyFilter.jsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import React from 'react';
-
-var PROFICIENCY_NAMES = ['No Filter', 'Above 40%', 'Above 60%', 'Above 80%'];
-
-// the proficiency filter component. this demonstrates how to integrate
-// a React filter component with ag-Grid.
-export default class ProficiencyFilter extends React.Component {
-
- constructor(props) {
- super();
- this.state = {
- selected: PROFICIENCY_NAMES[0]
- };
- }
-
- // called by agGrid
- doesFilterPass(params) {
- var value = this.props.valueGetter(params);
- var valueAsNumber = parseFloat(value);
-
- switch (this.state.selected) {
- case PROFICIENCY_NAMES[1] : return valueAsNumber >= 40;
- case PROFICIENCY_NAMES[2] : return valueAsNumber >= 60;
- case PROFICIENCY_NAMES[3] : return valueAsNumber >= 80;
- default : return true;
- }
- };
-
- // called by agGrid
- isFilterActive() {
- return this.state.selected !== PROFICIENCY_NAMES[0];
- };
-
- onButtonPressed(name) {
- console.log(name);
- var newState = {selected: name};
- // set the state, and once it is done, then call filterChangedCallback
- this.setState(newState, this.props.filterChangedCallback);
- console.log(name);
- }
-
- render() {
- var rows = [];
- PROFICIENCY_NAMES.forEach( (name)=> {
- var selected = this.state.selected === name;
- rows.push(
-
-
-
- );
- });
-
- return (
-
-
- Custom Proficiency Filter
-
- {rows}
-
- );
- }
-
- // these are other method that agGrid calls that we
- // could of implemented, but they are optional and
- // we have no use for them in this particular filter.
- //getApi() {}
- //afterGuiAttached(params) {}
- //onNewRowsLoaded() {}
- //onAnyFilterChanged() {}
-}
diff --git a/src-standard/RefData.js b/src-standard/RefData.js
deleted file mode 100644
index 3ded99b..0000000
--- a/src-standard/RefData.js
+++ /dev/null
@@ -1,128 +0,0 @@
-export default class RefData {}
-
-RefData.FIRST_NAMES = [
- "Sophie", "Isabelle", "Emily", "Olivia", "Lily", "Chloe", "Isabella",
- "Amelia", "Jessica", "Sophia", "Ava", "Charlotte", "Mia", "Lucy", "Grace", "Ruby",
- "Ella", "Evie", "Freya", "Isla", "Poppy", "Daisy", "Layla"
- ];
-
-RefData.LAST_NAMES = [
- "Beckham", "Black", "Braxton", "Brennan", "Brock", "Bryson", "Cadwell",
- "Cage", "Carson", "Chandler", "Cohen", "Cole", "Corbin", "Dallas", "Dalton", "Dane",
- "Donovan", "Easton", "Fisher", "Fletcher", "Grady", "Greyson", "Griffin", "Gunner",
- "Hayden", "Hudson", "Hunter", "Jacoby", "Jagger", "Jaxon", "Jett", "Kade", "Kane",
- "Keating", "Keegan", "Kingston", "Kobe"
- ];
-
-RefData.COUNTRY_CODES = {
- Ireland: "ie",
- Spain: "es",
- "United Kingdom": "gb",
- France: "fr",
- Germany: "de",
- Sweden: "se",
- Italy: "it",
- Greece: "gr",
- Iceland: "is",
- Portugal: "pt",
- Malta: "mt",
- Norway: "no",
- Brazil: "br",
- Argentina: "ar",
- Colombia: "co",
- Peru: "pe",
- Venezuela: "ve",
- Uruguay: "uy"
- };
-
-RefData.COUNTRIES = [
- {country: "Ireland", continent: "Europe", language: "English"},
- {country: "Spain", continent: "Europe", language: "Spanish"},
- {country: "United Kingdom", continent: "Europe", language: "English"},
- {country: "France", continent: "Europe", language: "French"},
- {country: "Germany", continent: "Europe", language: "(other)"},
- {country: "Sweden", continent: "Europe", language: "(other)"},
- {country: "Norway", continent: "Europe", language: "(other)"},
- {country: "Italy", continent: "Europe", language: "(other)"},
- {country: "Greece", continent: "Europe", language: "(other)"},
- {country: "Iceland", continent: "Europe", language: "(other)"},
- {country: "Portugal", continent: "Europe", language: "Portuguese"},
- {country: "Malta", continent: "Europe", language: "(other)"},
- {country: "Brazil", continent: "South America", language: "Portuguese"},
- {country: "Argentina", continent: "South America", language: "Spanish"},
- {country: "Colombia", continent: "South America", language: "Spanish"},
- {country: "Peru", continent: "South America", language: "Spanish"},
- {country: "Venezuela", continent: "South America", language: "Spanish"},
- {country: "Uruguay", continent: "South America", language: "Spanish"}
- ];
-
-RefData.DOB = [
- new Date(2000, 0, 1 ),
- new Date(2001, 1, 2 ),
- new Date(2002, 2, 3 ),
- new Date(2003, 3, 4 ),
- new Date(2004, 4, 5 ),
- new Date(2005, 5, 6 ),
- new Date(2006, 6, 7 ),
- new Date(2007, 7, 8 ),
- new Date(2008, 8, 9 ),
- new Date(2009, 9, 10 ),
- new Date(2010, 10, 11 ),
- new Date(2011, 11, 12 )
-];
-
-RefData.ADDRESSES = [
- '1197 Thunder Wagon Common, Cataract, RI, 02987-1016, US, (401) 747-0763',
- '3685 Rocky Glade, Showtucket, NU, X1E-9I0, CA, (867) 371-4215',
- '3235 High Forest, Glen Campbell, MS, 39035-6845, US, (601) 638-8186',
- '2234 Sleepy Pony Mall , Drain, DC, 20078-4243, US, (202) 948-3634',
- '2722 Hazy Turnabout, Burnt Cabins, NY, 14120-5642, US, (917) 604-6597',
- '6686 Lazy Ledge, Two Rock, CA, 92639-3020, US, (619) 901-9911',
- '2000 Dewy Limits, Wacahoota, NF, A4L-2V9, CA, (709) 065-3959',
- '7710 Noble Pond Avenue, Bolivia, RI, 02931-1842, US, (401) 865-2160',
- '3452 Sunny Vale, Pyro, ON, M8V-4Z0, CA, (519) 072-8609',
- '4402 Dusty Cove, Many Farms, UT, 84853-8223, US, (435) 518-0673',
- '5198 Silent Parade, Round Bottom, MD, 21542-9798, US, (301) 060-7245',
- '8550 Shady Moor, Kitty Fork, CO, 80941-6207, US, (303) 502-3767',
- '2131 Old Dell, Merry Midnight, AK, 99906-8842, US, (907) 369-2206',
- '7390 Harvest Crest, Mosquito Crossing, RI, 02957-6116, US, (401) 463-6348',
- '874 Little Point, Hot Coffee, BC, V3U-2P6, CA, (250) 706-9207',
- '8834 Stony Pioneer Heights, Newlove, OR, 97419-8670, US, (541) 408-2213',
- '9829 Grand Beach, Flint, UT, 84965-9900, US, (435) 700-5161',
- '3799 Cozy Blossom Ramp, Ptarmigan, MS, 38715-0313, US, (769) 740-1526',
- '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',
- '1137 Umber Trail, Shacktown, NW, X3U-5Y8, CA, (867) 702-6883',
- '9914 Hidden Bank, Wyoming, MO, 64635-9665, US, (636) 280-4192',
- '7080 Misty Nectar Townline, Coward, AB, T9U-3N4, CA, (403) 623-2838',
- '1184 Wishing Grounds, Vibank, NW, X7D-0V9, CA, (867) 531-2730',
- '126 Easy Pointe, Grandview Beach, KY, 40928-9539, US, (502) 548-0956',
- '6683 Colonial Street, Swan River, BC, V1A-9I8, CA, (778) 014-4257',
- '960 Gentle Oak Lane, Shakopee, ND, 58618-6277, US, (701) 327-1219',
- '6918 Cotton Pine Corner, Kenaston, IA, 52165-3975, US, (515) 906-7427',
- '2368 Burning Woods, Ernfold, NY, 11879-9186, US, (646) 819-0355',
- '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',
- '5313 Clear Willow Route, Amazon, BC, V0S-2S6, CA, (604) 340-7596',
- '7000 Pleasant Autoroute, Spaceport City, UT, 84749-2448, US, (435) 154-3360',
- '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',
- '6230 Jagged Bear Key, Young, AR, 72337-3811, US, (501) 805-7239',
- '7207 Heather Vista, Devon, WY, 82520-1771, US, (307) 358-7092',
- '9416 Red Rise Place, Spraytown, OK, 73809-4766, US, (580) 867-1973',
- '3770 Golden Horse Diversion, Yelland, IL, 60471-1487, US, (224) 717-9349',
- '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',
- '9218 Crystal Highway, Pickelville, MT, 59847-9299, US, (406) 076-0024',
- '6737 Bright Quay, Lazy Mountain, KY, 42390-4772, US, (606) 256-7288',
- '237 Merry Campus, Twentysix, SC, 29330-4909, US, (864) 945-0157',
- '446 Fallen Gate Rise, Petrolia, SC, 29959-9527, US, (864) 826-0553',
- '2347 Indian Boulevard, Frisbee, VA, 23797-6458, US, (703) 656-8445',
- '365 Emerald Grove Line, Level, NC, 28381-1514, US, (919) 976-7958',
- '1207 Iron Extension, Klickitat, SC, 29197-8571, US, (803) 535-7888',
- '6770 Cinder Glen, Caronport, OH, 45053-5002, US, (440) 369-4018',
- '7619 Tawny Carrefour, Senlac, NV, 89529-9876, US, (775) 901-6433'];
-
-RefData.IT_SKILLS = ['android', 'css', 'html5', 'mac', 'windows'];
-
-RefData.IT_SKILLS_NAMES = ['Android', 'CSS', 'HTML 5', 'Mac', 'Windows'];
diff --git a/src-standard/RowDataFactory.js b/src-standard/RowDataFactory.js
deleted file mode 100644
index 0c68143..0000000
--- a/src-standard/RowDataFactory.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import RefData from './RefData';
-
-export default class RowDataFactory {
-
- createRowData() {
- var rowData = [];
-
- for (var i = 0; i < 200; i++) {
- var countryData = RefData.COUNTRIES[i % RefData.COUNTRIES.length];
- rowData.push({
- name: RefData.FIRST_NAMES[i % RefData.FIRST_NAMES.length] + ' ' + RefData.LAST_NAMES[i % RefData.LAST_NAMES.length],
- skills: {
- android: Math.random() < 0.4,
- html5: Math.random() < 0.4,
- mac: Math.random() < 0.4,
- windows: Math.random() < 0.4,
- css: Math.random() < 0.4
- },
- dob: RefData.DOB[i % RefData.DOB.length],
- address: RefData.ADDRESSES[i % RefData.ADDRESSES.length],
- years: Math.round(Math.random() * 100),
- proficiency: Math.round(Math.random() * 100),
- country: countryData.country,
- continent: countryData.continent,
- language: countryData.language,
- mobile: this.createRandomPhoneNumber(),
- landline: this.createRandomPhoneNumber()
- });
- }
-
- return rowData;
- }
-
- createRandomPhoneNumber() {
- var result = '+';
- for (var i = 0; i < 12; i++) {
- result += Math.round(Math.random() * 10);
- if (i === 2 || i === 5 || i === 8) {
- result += ' ';
- }
- }
- return result;
- }
-
-}
\ No newline at end of file
diff --git a/src-standard/SkillsCellRenderer.jsx b/src-standard/SkillsCellRenderer.jsx
deleted file mode 100644
index 332de28..0000000
--- a/src-standard/SkillsCellRenderer.jsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import RefData from './RefData';
-
-export default class SkillsCellRenderer extends React.Component {
-
- render() {
- var skills = [];
- var rowData = this.props.data;
- RefData.IT_SKILLS.forEach( (skill) => {
- if (rowData && rowData.skills && rowData.skills[skill]) {
- skills.push();
- }
- });
-
- return {skills};
- }
-
-}
-
-// the grid will always pass in one props called 'params',
-// which is the grid passing you the params for the cellRenderer.
-// this piece is optional. the grid will always pass the 'params'
-// props, so little need for adding this validation meta-data.
-SkillsCellRenderer.propTypes = {
- params: React.PropTypes.object
-};
\ No newline at end of file
diff --git a/src-standard/SkillsFilter.jsx b/src-standard/SkillsFilter.jsx
deleted file mode 100644
index 381097c..0000000
--- a/src-standard/SkillsFilter.jsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import React from 'react';
-import RefData from './RefData';
-
-// the skills filter component. this can be laid out much better in a 'React'
-// way. there are design patterns you can apply to layout out your React classes.
-// however, i'm not worried, as the intention here is to show you ag-Grid
-// working with React, and that's all. i'm not looking for any awards for my
-// React design skills.
-export default class SkillsFilter extends React.Component {
-
- constructor(props) {
- super(props);
- this.state = {
- android: false,
- css: false,
- html5: false,
- mac: false,
- windows: false
- };
- }
-
- getModel() {
- return {
- android: this.state.android,
- css: this.state.css,
- html5: this.state.html5,
- mac: this.state.mac,
- windows: this.state.windows
- }
- }
-
- setModel(model) {
- this.setState({
- android: model.android,
- css: model.css,
- html5: model.html5,
- mac: model.mac,
- windows: model.windows
- });
- }
-
- // called by agGrid
- doesFilterPass(params) {
-
- var rowSkills = params.data.skills;
- var passed = true;
-
- RefData.IT_SKILLS.forEach( (skill) => {
- if (this.state[skill]) {
- if (!rowSkills[skill]) {
- passed = false;
- }
- }
- });
-
- return passed;
- };
-
- // called by agGrid
- isFilterActive() {
- var somethingSelected = this.state.android || this.state.css ||
- this.state.html5 || this.state.mac || this.state.windows;
- return somethingSelected;
- };
-
- onSkillChanged(skill, event) {
- var newValue = event.target.checked;
- var newModel = {};
- newModel[skill] = newValue;
- // set the state, and once it is done, then call filterChangedCallback
- this.setState(newModel, this.props.filterChangedCallback );
- }
-
- helloFromSkillsFilter() {
- alert("Hello From The Skills Filter!");
- }
-
- render() {
-
- var skillsTemplates = [];
- RefData.IT_SKILLS.forEach( (skill, index) => {
-
- var skillName = RefData.IT_SKILLS_NAMES[index];
- var template = (
-
- );
-
- skillsTemplates.push(template);
- });
-
- return (
-
-
- Custom Skills Filter
-
- {skillsTemplates}
-
- );
- }
-
- // these are other method that agGrid calls that we
- // could of implemented, but they are optional and
- // we have no use for them in this particular filter.
- //afterGuiAttached(params) {}
- //onNewRowsLoaded() {}
- //onAnyFilterChanged() {}
-}
diff --git a/src-standard/index.js b/src-standard/index.js
deleted file mode 100644
index 001f895..0000000
--- a/src-standard/index.js
+++ /dev/null
@@ -1,18 +0,0 @@
-'use strict';
-
-import ReactDOM from 'react-dom';
-import React from 'react';
-import MyApp from './myApp.jsx';
-
-import 'ag-grid-root/dist/styles/ag-grid.css';
-import 'ag-grid-root/dist/styles/theme-fresh.css';
-
-// waiting for dom to load before booting react. we could alternatively
-// put the index.js reference at the end fo the index.html, but i prefer this way.
-document.addEventListener('DOMContentLoaded', ()=> {
- var container = document.getElementById('myAppContainer');
- ReactDOM.render(
- React.createElement(MyApp),
- container
- );
-});
diff --git a/src-standard/myApp.css b/src-standard/myApp.css
deleted file mode 100644
index 5e7e6f8..0000000
--- a/src-standard/myApp.css
+++ /dev/null
@@ -1,28 +0,0 @@
-
-.ag-cell {
- padding-top: 2px !important;
- padding-bottom: 2px !important;
-}
-
-label {
- font-weight: normal !important;
-}
-
-.div-percent-bar {
- display: inline-block;
- height: 20px;
- position: relative;
-}
-
-.div-percent-value {
- position: absolute;
- padding-left: 4px;
- font-weight: bold;
- font-size: 13px;
-}
-
-.div-outer-div {
- display: inline-block;
- height: 100%;
- width: 100%;
-}
diff --git a/src-standard/myApp.jsx b/src-standard/myApp.jsx
deleted file mode 100644
index 2d06bb7..0000000
--- a/src-standard/myApp.jsx
+++ /dev/null
@@ -1,224 +0,0 @@
-import React from "react";
-import {AgGridReact} from "ag-grid-react";
-import RowDataFactory from "./RowDataFactory";
-import ColDefFactory from "./ColDefFactory.jsx";
-import MyReactDateComponent from "./MyReactDateComponent.jsx";
-import MyReactHeaderComponent from "./MyReactHeaderComponent.jsx";
-import "./myApp.css";
-// take this line out if you do not want to use ag-Grid-Enterprise
-import "ag-grid-enterprise";
-
-export default class MyApp extends React.Component {
-
- constructor() {
- super();
-
- this.state = {
- quickFilterText: null,
- showGrid: true,
- showToolPanel: false,
- columnDefs: new ColDefFactory().createColDefs(),
- rowData: new RowDataFactory().createRowData(),
- icons: {
- columnRemoveFromGroup: '',
- filter: '',
- sortAscending: '',
- sortDescending: '',
- groupExpanded: '',
- groupContracted: '',
- columnGroupOpened: '',
- columnGroupClosed: ''
- }
- };
-
- // the grid options are optional, because you can provide every property
- // to the grid via standard React properties. however, the react interface
- // doesn't block you from using the standard JavaScript interface if you
- // wish. Maybe you have the gridOptions stored as JSON on your server? If
- // you do, the providing the gridOptions as a standalone object is just
- // what you want!
- this.gridOptions = {
- //We register the react date component that ag-grid will use to render
- dateComponentFramework: MyReactDateComponent,
- // this is how you listen for events using gridOptions
- onModelUpdated: function () {
- console.log('event onModelUpdated received');
- },
- defaultColDef: {
- headerComponentFramework: MyReactHeaderComponent,
- headerComponentParams: {
- menuIcon: 'fa-bars'
- }
- },
- // this is a simple property
- rowBuffer: 10 // no need to set this, the default is fine for almost all scenarios
- };
-
- this.onGridReady = this.onGridReady.bind(this);
- this.onRowSelected = this.onRowSelected.bind(this);
- this.onCellClicked = this.onCellClicked.bind(this);
- }
-
- onShowGrid(show) {
- this.setState({
- showGrid: show
- });
- }
-
- onToggleToolPanel(event) {
- this.setState({showToolPanel: event.target.checked});
- }
-
- onGridReady(params) {
- this.api = params.api;
- this.columnApi = params.columnApi;
- }
-
- selectAll() {
- this.api.selectAll();
- }
-
- deselectAll() {
- this.api.deselectAll();
- }
-
- setCountryVisible(visible) {
- this.columnApi.setColumnVisible('country', visible);
- }
-
- onQuickFilterText(event) {
- this.setState({quickFilterText: event.target.value});
- }
-
- onCellClicked(event) {
- console.log('onCellClicked: ' + event.data.name + ', col ' + event.colIndex);
- }
-
- onRowSelected(event) {
- console.log('onRowSelected: ' + event.node.data.name);
- }
-
- onRefreshData() {
- var newRowData = new RowDataFactory().createRowData();
- this.setState({
- rowData: newRowData
- });
- }
-
- invokeSkillsFilterMethod() {
- var skillsFilter = this.api.getFilterInstance('skills');
- var componentInstance = skillsFilter.getFrameworkComponentInstance();
- componentInstance.helloFromSkillsFilter();
- }
-
- dobFilter() {
- let dateFilterComponent = this.gridOptions.api.getFilterInstance('dob');
- dateFilterComponent.setFilterType('equals');
- dateFilterComponent.setDateFrom('2000-01-01');
- this.gridOptions.api.onFilterChanged();
-
- }
-
- render() {
- var gridTemplate;
- var bottomHeaderTemplate;
- var topHeaderTemplate;
-
- topHeaderTemplate = (
-
-
-
-
-
-
-
- Employees Skills and Contact Details
-
-
- );
-
- // showing the bottom header and grid is optional, so we put in a switch
- if (this.state.showGrid) {
- bottomHeaderTemplate = (
-
-
-
-
-
- 
'
- }
-
- html += ' COUNTRY_NAME'.replace('COUNTRY_NAME', params.node.key);
- html += ' Gold: GOLD_COUNT'.replace('GOLD_COUNT', params.data.gold);
- html += ' Silver: SILVER_COUNT'.replace('SILVER_COUNT', params.data.silver);
- html += ' Bronze: BRONZE_COUNT'.replace('BRONZE_COUNT', params.data.bronze);
-
- return html;
- }
- };
- }
-
- onGridReady(params) {
- this.api = params.api;
- this.columnApi = params.columnApi;
-
- var that = this;
- var httpRequest = new XMLHttpRequest();
- httpRequest.open('GET', '/olympicWinners.json');
- httpRequest.send();
- httpRequest.onreadystatechange = function() {
- if (httpRequest.readyState == 4 && httpRequest.status == 200) {
- var httpResult = JSON.parse(httpRequest.responseText);
- that.api.setRowData(httpResult);
- }
- };
-
- }
-
- render() {
- var gridTemplate = (
- ![](http://flags.fmcdn.net/data/flags/mini/"
- + RefData.COUNTRY_CODES[params.value] + ".png){kind=small}
";
- return flag + " " + params.value;
- } else {
- return null;
- }
-}
-
-//Utility function used to pad the date formatting.
-function pad(num, totalStringSize) {
- let asString = num + "";
- while (asString.length < totalStringSize) asString = "0" + asString;
- return asString;
-}
diff --git a/src-standard/MyReactDateComponent.jsx b/src-standard/MyReactDateComponent.jsx
deleted file mode 100644
index d298abc..0000000
--- a/src-standard/MyReactDateComponent.jsx
+++ /dev/null
@@ -1,167 +0,0 @@
-import React from 'react';
-
-// Date Component to be used in the date filter.
-// This is a very simple example of how a React component can be plugged as a DateComponentFramework
-// as you can see, the only requirement is that the React component implements the required methods
-// getDate and setDate and that it calls back into props.onDateChanged every time that the date changes.
-export default class MyReactDateComponent extends React.Component {
-
- constructor(props) {
- super(props);
- //The state of this component is represented of:
- // The current date it holds, null by default, null if the date typed by the user is not valid or fields are blank
- // The current values that the user types in the input boxes, by default ''
-
- //The textBoxes state is necessary since it can be set from ag-Grid. This can be seen in this example through
- // the usage of the button DOB equals to 01/01/2000 in the example page.
- this.state = {
- date: null,
- textBoxes: {
- dd: '',
- mm: '',
- yyyy: ''
- }
- }
- }
-
- render() {
- //Inlining styles to make simpler the component
- let filterStyle = {
- margin:'2px'
- };
- let ddStyle = {
- width: '30px'
- };
- let mmStyle = {
- width: '30px'
- };
- let yyyyStyle = {
- width: '60px'
- };
- let resetStyle = {
- padding: '2px',
- backgroundColor: 'red',
- borderRadius: '3px',
- fontSize: '10px',
- marginRight: '5px',
- color: 'white'
- };
-
- return (
-