Release of 6.2.0

Release of 6.1.0
Release of 6.0.1
2016-10-11 16:13:26 +01:00 · 2016-10-03 13:02:15 +01:00 · 2016-09-15 15:05:56 +01:00 · 2016-09-14 15:58:15 +01:00 · 2016-09-14 15:02:35 +01:00 · 2016-09-14 12:15:30 +01:00
20 changed files with 338 additions and 83 deletions
--- a/README.md
+++ b/README.md
@@ -2,10 +2,15 @@
 ag-Grid React Example
 ==============

-Example of running ag-Grid inside React application.
+Examples of running ag-Grid inside React application.

 See the [www.ag-grid.com](http://www.ag-grid.com).

+There are two examples:
+
+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
 ==============
@@ -13,6 +18,5 @@ Building
 To build:
 - `npm install`
 - `npm install webpack -g`
- `npm start`
+- `npm run standard` or `npm run large`
 - navigate to localhost:8080
-
--- a/index.html
+++ b/index.html
@@ -1,5 +1,8 @@
 <html>

+    <!-- This index file is common for both the standard and large examples. As to which project you are running
+        depends on whether you use 'npm run standard' or 'npm run large' -->
+
    <head>
        <meta charset="utf-8">
        <script type="text/javascript" src="dist/bundle.js" charset="utf-8"></script>
--- a/package.json
+++ b/package.json
@@ -1,10 +1,11 @@
 {
  "name": "ag-grid-react-example",
-  "version": "5.2.0",
+  "version": "6.2.0",
  "description": "Example Reach applicaiton using ag-Grid.",
  "main": "dist/ag-grid-react-example.js",
  "scripts": {
-    "start": "webpack-dev-server --progress --colors --hot --inline"
+    "standard": "webpack-dev-server --config webpack.config.standard.js --progress --colors --hot --inline",
+    "large": "webpack-dev-server --config webpack.config.large.js --progress --colors --hot --inline"
  },
  "repository": {
    "type": "git",
@@ -26,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",
@@ -34,8 +36,8 @@
  "dependencies": {
    "react": "0.14.6",
    "react-dom": "0.14.6",
-    "ag-grid": "~5.2.0",
-    "ag-grid-enterprise": "~5.2.0",
-    "ag-grid-react": "~5.2.0"
+    "ag-grid": "6.2.x",
+    "ag-grid-enterprise": "6.2.x",
+    "ag-grid-react": "6.2.x"
  }
 }
--- a/src-large/index.js
+++ b/src-large/index.js
@@ -0,0 +1,18 @@
+'use strict';
+
+import ReactDOM from 'react-dom';
+import React from 'react';
+import LargeGrid from './largeGrid.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(LargeGrid),
+        container
+    );
+});
--- a/src-large/largeGrid.jsx
+++ b/src-large/largeGrid.jsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import {reactCellRendererFactory} from 'ag-grid-react';
+import SimpleCellRenderer from './simpleCellRenderer.jsx';
+
+import {AgGridReact} from 'ag-grid-react';
+
+// put this line in to use ag-Grid enterprise
+// import 'ag-grid-enterprise';
+
+export default class MyApp extends React.Component {
+
+    constructor() {
+        super();
+
+        this.createColumnNames();
+
+        this.state = {
+            columnDefs: this.createColumnDefs(),
+            rowData: this.createRowData()
+        };
+    }
+
+    createColumnNames() {
+        // creates column names by iterating the alphabet twice, eg {'aa','ab','ac',.....'zz'}
+        var alphabet = 'abcdefghijklmnopqrstuvwxyz'.split('');
+        this.columnNames = [];
+        alphabet.forEach( letter1 => {
+            alphabet.forEach( letter2 => {
+                this.columnNames.push(letter1 + letter2);
+            });
+        });
+    }
+
+    createRowData() {
+        var rowData = [];
+
+        for (var i = 0; i<1000; i++) {
+            var item = {};
+            this.columnNames.forEach( colName => {
+                item[colName] = '('+colName.toUpperCase()+','+i+')'
+            });
+            rowData.push(item);
+        }
+
+        return rowData;
+    }
+
+    createColumnDefs() {
+        var columnDefs = [];
+
+        this.columnNames.forEach( colName => {
+            columnDefs.push({
+                headerName: colName.toUpperCase(),
+                field: colName,
+                cellRendererFramework: SimpleCellRenderer,
+                width: 100
+            });
+        });
+
+        return columnDefs;
+    }
+
+    render() {
+        return (
+            <div style={{height: '100%'}} className="ag-fresh">
+                    <AgGridReact columnDefs={this.state.columnDefs} rowData={this.state.rowData} />
+            </div>
+        );
+    }
+
+}
--- a/src-large/simpleCellRenderer.jsx
+++ b/src-large/simpleCellRenderer.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+export default class SimpleCellRenderer extends React.Component {
+    render() {
+        // 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">{this.props.value}</span>
+        );
+    }
+}
+
+SimpleCellRenderer.propTypes = {
+    params: React.PropTypes.object
+};
--- a/src-standard/ColDefFactory.jsx
+++ b/src-standard/ColDefFactory.jsx
@@ -1,8 +1,7 @@
 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';

@@ -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),
-                        // using ag-Grid's React filter factory
-                        filter: reactFilterFactory(SkillsFilter)
+                        // 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),
-                        // using ag-Grid's React filter factory
-                        filter: reactFilterFactory(ProficiencyFilter)}
+                    {headerName: "Proficiency", field: "proficiency", width: 120, enableValue: true,
+                        // supply a React component
+                        cellRendererFramework: ProficiencyCellRenderer,
+                        // supply a React component
+                        filterFramework: ProficiencyFilter
+                    }
                ]
            },
            {
--- a/src-standard/NameCellEditor.jsx
+++ b/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
+};
--- a/src-standard/ProficiencyCellRenderer.jsx
+++ b/src-standard/ProficiencyCellRenderer.jsx
@@ -0,0 +1,25 @@
+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 (
+            <div className="div-percent-bar" style={{ width: this.props.value + '%', backgroundColor: backgroundColor }}>
+                <div className="div-percent-value">{this.props.value}%</div>
+            </div>
+        );
+    }
+}
--- a/src-standard/ProficiencyFilter.jsx
+++ b/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);
    }

--- a/src-standard/RefData.js
+++ b/src-standard/RefData.js
--- a/src-standard/RowDataFactory.js
+++ b/src-standard/RowDataFactory.js
--- a/src-standard/SkillsCellRenderer.jsx
+++ b/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} />);
--- a/src-standard/SkillsFilter.jsx
+++ b/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() {}
--- a/src-standard/index.js
+++ b/src-standard/index.js
--- a/src-standard/myApp.css
+++ b/src-standard/myApp.css
--- a/src-standard/myApp.jsx
+++ b/src-standard/myApp.jsx
--- a/src/ProficiencyCellRenderer.jsx
+++ b/src/ProficiencyCellRenderer.jsx
@@ -1,34 +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 params = this.props.params;
-        var backgroundColor;
-        if (params.value < 20) {
-            backgroundColor = 'red';
-        } else if (params.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>
-        );
-    }
-}
-
-// 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
-};
--- a/webpack.config.large.js
+++ b/webpack.config.large.js
@@ -1,5 +1,5 @@
 module.exports = {
-    entry: "./src/index.js",
+    entry: "./src-large/index.js",
    output: {
        path: __dirname,
        filename: "dist/bundle.js"
--- a/webpack.config.standard.js
+++ b/webpack.config.standard.js
@@ -0,0 +1,27 @@
+module.exports = {
+    entry: "./src-standard/index.js",
+    output: {
+        path: __dirname,
+        filename: "dist/bundle.js"
+    },
+    module: {
+        loaders: [
+            {
+                test: /\.css$/,
+                loader: "style!css"
+            },
+            {
+                test: /\.js$|\.jsx$/,
+                loader: 'babel-loader',
+                query: {
+                    presets: ['react', 'es2015']
+                }
+            }
+        ]
+    },
+    resolve: {
+        alias: {
+            "ag-grid-root" : __dirname + "/node_modules/ag-grid"
+        }
+    }
+};
Author	SHA1	Message	Date
seanlandsman	3b5ee65790	Release of 6.2.0	2016-10-11 16:13:26 +01:00
Sean Landsman	4829b2f6cd	Release of 6.1.0	2016-10-03 13:02:15 +01:00
Sean Landsman	67af64ea9d	Release of 6.0.1	2016-09-15 15:05:56 +01:00
ceolter	99dfa1e4f9	new component model	2016-09-14 15:58:15 +01:00
ceolter	1e9ef53316	new component model	2016-09-14 15:02:35 +01:00
ceolter	b5949d8d5d	new component model	2016-09-14 12:15:30 +01:00
ceolter	b4b8c85172	new component model	2016-09-12 22:20:20 +01:00
ceolter	c703eaf89c	new component model	2016-09-12 13:45:37 +01:00
ceolter	8804a01de3	release 5.4.0	2016-09-09 14:21:19 +01:00
ceolter	0dc55bd393	release 5.3.2	2016-09-02 16:45:32 +01:00
ceolter	eee08a9284	release 5.3.2	2016-09-02 16:43:50 +01:00
ceolter	68ba430896	release 5.3.2	2016-09-02 16:43:20 +01:00
ceolter	5a8da199c2	release 5.3.0	2016-08-30 17:14:43 +01:00