7.3.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ag-grid-react-example",
-  "version": "7.2.0",
+  "version": "7.3.0",
   "description": "Example Reach applicaiton using ag-Grid.",
   "main": "dist/ag-grid-react-example.js",
   "scripts": {
@@ -36,8 +36,8 @@
   "dependencies": {
     "react": "0.14.6",
     "react-dom": "0.14.6",
-    "ag-grid": "7.2.x",
+    "ag-grid": "7.3.x",
-    "ag-grid-enterprise": "7.2.x",
+    "ag-grid-enterprise": "7.3.x",
-    "ag-grid-react": "7.2.x"
+    "ag-grid-react": "7.3.x"
   }
 }

src-standard/ColDefFactory.jsx

@@ -23,13 +23,7 @@ export default class ColDefFactory {
                     {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}}
+                        filterParams: {cellRenderer: countryCellRenderer, cellHeight: 20}},
-                    ,
-                    {headerName: "DOB", field: "dob", width: 90, enableRowGroup: true, enablePivot: true, filter:'date', cellRenderer: function(params) {
-                        return  pad(params.value.getDate(), 2) + '/' +
-                                pad(params.value.getMonth() + 1, 2)+ '/' +
-                                params.value.getFullYear();
-                    }}
                 ]
             },
             {
@@ -74,10 +68,3 @@ function countryCellRenderer(params) {
         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;
-}

src-standard/MyReactDateComponent.jsx

@@ -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 (
-            <div style={filterStyle}>
-                <span style={resetStyle} onClick={this.resetDate.bind(this)}>x</span>
-                <input onInput = {this.onDateChanged.bind(this)} ref="dd" placeholder="dd" style={ddStyle} value={this.state.textBoxes.dd} maxLength="2"/>/
-                <input onInput = {this.onDateChanged.bind(this)} ref="mm" placeholder="mm" style={mmStyle} value={this.state.textBoxes.mm} maxLength="2"/>/
-                <input onInput = {this.onDateChanged.bind(this)} ref="yyyy" placeholder="yyyy" style={yyyyStyle} value={this.state.textBoxes.yyyy} maxLength="4"/>
-            </div>
-        );
-    }
-
-    //*********************************************************************************
-    //          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
-};

src-standard/RefData.js

@@ -56,21 +56,6 @@ RefData.COUNTRIES = [
         {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',

src-standard/RowDataFactory.js

@@ -16,7 +16,6 @@ export default class RowDataFactory {
                     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),

src-standard/SkillsFilter.jsx

@@ -71,10 +71,6 @@ export default class SkillsFilter extends React.Component {
         this.setState(newModel, this.props.filterChangedCallback );
     }
 
-    helloFromSkillsFilter() {
-        alert("Hello From The Skills Filter!");
-    }
-
     render() {
 
         var skillsTemplates = [];

src-standard/myApp.jsx

@@ -1,12 +1,13 @@
-import React from "react";
+import ReactDOM from 'react-dom';
-import {AgGridReact} from "ag-grid-react";
+import React from 'react';
-import RowDataFactory from "./RowDataFactory";
+import {AgGridReact} from 'ag-grid-react';
-import ColDefFactory from "./ColDefFactory.jsx";
+import RefData from './RefData';
-import MyReactDateComponent from "./MyReactDateComponent.jsx";
+import RowDataFactory from './RowDataFactory';
-import "./myApp.css";
+import ColDefFactory from './ColDefFactory.jsx';
-import "ag-grid-enterprise";
+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 {
 
@@ -38,8 +39,6 @@ export default class MyApp extends React.Component {
         // 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');
@@ -95,20 +94,6 @@ export default class MyApp extends React.Component {
         });
     }
 
-    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;
@@ -117,14 +102,9 @@ export default class MyApp extends React.Component {
         topHeaderTemplate = (
             <div>
                 <div style={{float: 'right'}}>
-                    <input type="text" onChange={this.onQuickFilterText.bind(this)}
+                    <input type="text" onChange={this.onQuickFilterText.bind(this)} placeholder="Type text to filter..."/>
-                           placeholder="Type text to filter..."/>
+                    <button id="btDestroyGrid" disabled={!this.state.showGrid} onClick={this.onShowGrid.bind(this, false)}>Destroy Grid</button>
-                    <button id="btDestroyGrid" disabled={!this.state.showGrid}
+                    <button id="btCreateGrid" disabled={this.state.showGrid} onClick={this.onShowGrid.bind(this, true)}>Create Grid</button>
-                            onClick={this.onShowGrid.bind(this, false)}>Destroy Grid
-                    </button>
-                    <button id="btCreateGrid" disabled={this.state.showGrid} onClick={this.onShowGrid.bind(this, true)}>
-                        Create Grid
-                    </button>
                 </div>
                 <div style={{padding: '4px'}}>
                     <b>Employees Skills and Contact Details</b> <span id="rowCount"/>
@@ -150,18 +130,11 @@ export default class MyApp extends React.Component {
                     </div>
                     <div style={{clear: 'both'}}></div>
                     <div style={{padding: 4}} className={'toolbar'}>
-                        <span>
                         <label>
                             <input type="checkbox" onChange={this.onToggleToolPanel.bind(this)}/>
                             Show Tool Panel
                         </label>
                         <button onClick={this.onRefreshData.bind(this)}>Refresh Data</button>
-                            </span>
-                        <span style={{marginLeft: 20}}>
-                            Filter API:
-                            <button onClick={this.invokeSkillsFilterMethod.bind(this, false)}>Invoke Skills Filter Method</button>
-                            <button onClick={this.dobFilter.bind(this)}>DOB equals to 01/01/2000</button>
-                        </span>
                     </div>
                     <div style={{clear: 'both'}}></div>
                 </div>