6.4.0

README.md

@@ -7,8 +7,10 @@ Examples of running ag-Grid inside React application.
 See the [www.ag-grid.com](http://www.ag-grid.com).
 
 There are two examples:
-standard - shows a typical grid demonstrating many ag-Grid features
-large - shows a very large grid (767 columns and 1,000 rows) using React cell renderers
+
+1. standard - shows a typical grid demonstrating many ag-Grid features
+
+2. large - shows a very large grid (767 columns and 1,000 rows) using React cell renderers
 
 Building
 ==============

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ag-grid-react-example",
-  "version": "5.3.2",
+  "version": "6.3.0",
   "description": "Example Reach applicaiton using ag-Grid.",
   "main": "dist/ag-grid-react-example.js",
   "scripts": {
@@ -27,6 +27,7 @@
     "babel-loader": "6.2.1",
     "babel-preset-es2015": "6.3.13",
     "babel-preset-react": "6.3.13",
+    "babel-core": "^6.0.0",
     "css-loader": "0.23.1",
     "style-loader": "0.13.0",
     "webpack": "1.12.11",
@@ -35,8 +36,8 @@
   "dependencies": {
     "react": "0.14.6",
     "react-dom": "0.14.6",
-    "ag-grid": "~5.3.0",
-    "ag-grid-enterprise": "~5.3.0",
-    "ag-grid-react": "~5.3.2"
+    "ag-grid": "6.4.x",
+    "ag-grid-enterprise": "6.4.x",
+    "ag-grid-react": "6.4.x"
   }
 }

src-large/largeGrid.jsx

@@ -48,15 +48,11 @@ export default class MyApp extends React.Component {
     createColumnDefs() {
         var columnDefs = [];
 
-        // pass in the parent component to use for React component to the cellRenderer.
-        // this is optional. if missing, then react router will not work.
-        var cellRenderer = reactCellRendererFactory(SimpleCellRenderer, this);
-
         this.columnNames.forEach( colName => {
             columnDefs.push({
                 headerName: colName.toUpperCase(),
                 field: colName,
-                cellRenderer: cellRenderer,
+                cellRendererFramework: SimpleCellRenderer,
                 width: 100
             });
         });

src-large/simpleCellRenderer.jsx

@@ -2,12 +2,10 @@ import React from 'react';
 
 export default class SimpleCellRenderer extends React.Component {
     render() {
-        var params = this.props.params;
-
         // the class below does nothing, it's just for testing, so we can inspect the dom of
         // the result and looking for it, to validate that this cellRenderer is actually getting used.
         return (
-            <span className="simple-cell-renderer">{params.value}</span>
+            <span className="simple-cell-renderer">{this.props.value}</span>
         );
     }
 }

src-standard/ColDefFactory.jsx

@@ -1,14 +1,13 @@
 import SkillsCellRenderer from './SkillsCellRenderer.jsx';
+import NameCellEditor from './NameCellEditor.jsx';
 import ProficiencyCellRenderer from './ProficiencyCellRenderer.jsx';
 import RefData from './RefData';
-import {reactCellRendererFactory} from 'ag-grid-react';
-import {reactFilterFactory} from 'ag-grid-react';
 import SkillsFilter from './SkillsFilter.jsx';
 import ProficiencyFilter from './ProficiencyFilter.jsx';
 
 export default class ColDefFactory {
 
-    createColDefs(parentReactComponent) {
+    createColDefs() {
 
         var columnDefs = [
             {headerName: '#', width: 30, checkboxSelection: true, suppressSorting: true,
@@ -17,9 +16,12 @@ export default class ColDefFactory {
                 headerName: 'Employee',
                 children: [
                     {headerName: "Name", field: "name", enableRowGroup: true, enablePivot: true,
-                        width: 150, pinned: true},
+                        width: 150, pinned: true, editable: true,
+                        // use a React cellEditor
+                        cellEditorFramework: NameCellEditor
+                    },
                     {headerName: "Country", field: "country", width: 150, enableRowGroup: true, enablePivot: true,
-                        // not bothering with React for country, as it's a simple HTML string
+                        // an example of using a non-React cell renderer
                         cellRenderer: countryCellRenderer, pinned: true,
                         filterParams: {cellRenderer: countryCellRenderer, cellHeight: 20}},
                 ]
@@ -28,16 +30,17 @@ export default class ColDefFactory {
                 headerName: 'IT Skills',
                 children: [
                     {headerName: "Skills", width: 125, suppressSorting: true, field: 'skills', enableRowGroup: true, enablePivot: true,
-                        // using ag-Grid's React cellRenderer factory
-                        cellRenderer: reactCellRendererFactory(SkillsCellRenderer, parentReactComponent),
-                        // using ag-Grid's React filter factory
-                        filter: reactFilterFactory(SkillsFilter, parentReactComponent)
+                        // supply a React component
+                        cellRendererFramework: SkillsCellRenderer,
+                        // supply a React component
+                        filterFramework: SkillsFilter
                     },
-                    {headerName: "Proficiency", field: "proficiency", filter: 'number', width: 120, enableValue: true,
-                        // using ag-Grid's React cellRenderer factory
-                        cellRenderer: reactCellRendererFactory(ProficiencyCellRenderer, parentReactComponent),
-                        // using ag-Grid's React filter factory
-                        filter: reactFilterFactory(ProficiencyFilter, parentReactComponent)}
+                    {headerName: "Proficiency", field: "proficiency", width: 120, enableValue: true,
+                        // supply a React component
+                        cellRendererFramework: ProficiencyCellRenderer,
+                        // supply a React component
+                        filterFramework: ProficiencyFilter
+                    }
                 ]
             },
             {

src-standard/NameCellEditor.jsx

@@ -0,0 +1,117 @@
+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 (
+            <input ref="textField" value={this.state.value} onChange={this.onChangeListener.bind(this)}/>
+        );
+    }
+
+    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
+};

src-standard/ProficiencyCellRenderer.jsx

@@ -7,28 +7,19 @@ import RefData from './RefData';
 export default class ProficiencyCellRenderer extends React.Component {
 
     render() {
-        var params = this.props.params;
         var backgroundColor;
-        if (params.value < 20) {
+        if (this.props.value < 20) {
             backgroundColor = 'red';
-        } else if (params.value < 60) {
+        } else if (this.props.value < 60) {
             backgroundColor = '#ff9900';
         } else {
             backgroundColor = '#00A000';
         }
 
         return (
-            <div className="div-percent-bar" style={{ width: params.value + '%', backgroundColor: backgroundColor }}>
-                <div className="div-percent-value">{params.value}%</div>
+            <div className="div-percent-bar" style={{ width: this.props.value + '%', backgroundColor: backgroundColor }}>
+                <div className="div-percent-value">{this.props.value}%</div>
             </div>
         );
     }
 }
-
-// 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.
-ProficiencyCellRenderer.propTypes = {
-    params: React.PropTypes.object
-};

src-standard/ProficiencyFilter.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import RefData from './RefData';
 
 var PROFICIENCY_NAMES = ['No Filter', 'Above 40%', 'Above 60%', 'Above 80%'];
 
@@ -7,22 +6,16 @@ var PROFICIENCY_NAMES = ['No Filter', 'Above 40%', 'Above 60%', 'Above 80%'];
 // a React filter component with ag-Grid.
 export default class ProficiencyFilter extends React.Component {
 
-    constructor() {
+    constructor(props) {
         super();
         this.state = {
             selected: PROFICIENCY_NAMES[0]
         };
     }
 
-    // called by agGrid
-    init(params) {
-        this.filterChangedCallback = params.filterChangedCallback;
-        this.valueGetter = params.valueGetter;
-    }
-
     // called by agGrid
     doesFilterPass(params) {
-        var value = this.valueGetter(params);
+        var value = this.props.valueGetter(params);
         var valueAsNumber = parseFloat(value);
 
         switch (this.state.selected) {
@@ -40,11 +33,9 @@ export default class ProficiencyFilter extends React.Component {
 
     onButtonPressed(name) {
         console.log(name);
-        this.setState({
-            selected: name
-        }, ()=> {
-            this.filterChangedCallback();
-        });
+        var newState = {selected: name};
+        // set the state, and once it is done, then call filterChangedCallback
+        this.setState(newState, this.props.filterChangedCallback);
         console.log(name);
     }
 

src-standard/SkillsCellRenderer.jsx

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

src-standard/SkillsFilter.jsx

@@ -8,11 +8,9 @@ import RefData from './RefData';
 // React design skills.
 export default class SkillsFilter extends React.Component {
 
-    constructor() {
-        super();
+    constructor(props) {
+        super(props);
         this.state = {
-            skills: RefData.IT_SKILLS,
-            skillNames: RefData.IT_SKILLS_NAMES,
             android: false,
             css: false,
             html5: false,
@@ -21,9 +19,24 @@ export default class SkillsFilter extends React.Component {
         };
     }
 
-    // called by agGrid
-    init(params) {
-        this.filterChangedCallback = params.filterChangedCallback;
+    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
@@ -32,7 +45,7 @@ export default class SkillsFilter extends React.Component {
         var rowSkills = params.data.skills;
         var passed = true;
 
-        this.state.skills.forEach( (skill) => {
+        RefData.IT_SKILLS.forEach( (skill) => {
             if (this.state[skill]) {
                 if (!rowSkills[skill]) {
                     passed = false;
@@ -54,15 +67,16 @@ export default class SkillsFilter extends React.Component {
         var newValue = event.target.checked;
         var newModel = {};
         newModel[skill] = newValue;
-        this.setState(newModel, ()=> {this.filterChangedCallback();} );
+        // set the state, and once it is done, then call filterChangedCallback
+        this.setState(newModel, this.props.filterChangedCallback );
     }
 
     render() {
 
         var skillsTemplates = [];
-        this.state.skills.forEach( (skill, index) => {
+        RefData.IT_SKILLS.forEach( (skill, index) => {
 
-            var skillName = this.state.skillNames[index];
+            var skillName = RefData.IT_SKILLS_NAMES[index];
             var template = (
                 <label key={skill} style={{border: '1px solid lightgrey', margin: 4, padding: 4, display: 'inline-block'}}>
                     <span>
@@ -91,7 +105,6 @@ export default class SkillsFilter extends React.Component {
     // 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() {}

src-standard/myApp.jsx

@@ -18,8 +18,8 @@ export default class MyApp extends React.Component {
             quickFilterText: null,
             showGrid: true,
             showToolPanel: false,
-            columnDefs: new ColDefFactory().createColDefs(this),
-            rowData: new RowDataFactory().createRowData(this),
+            columnDefs: new ColDefFactory().createColDefs(),
+            rowData: new RowDataFactory().createRowData(),
             icons: {
                 columnRemoveFromGroup: '<i class="fa fa-remove"/>',
                 filter: '<i class="fa fa-filter"/>',