Merge branch 'master' into latest

# Conflicts:
#	aot/dist/agGridColumn.ngfactory.ts
#	aot/dist/agGridColumn.ngsummary.json
#	aot/dist/agGridNg2.ngfactory.ts
#	aot/dist/agGridNg2.ngsummary.json
#	aot/dist/aggrid.module.ngfactory.ts
#	aot/dist/aggrid.module.ngsummary.json
#	aot/dist/baseComponentFactory.ngsummary.json
#	aot/dist/interfaces.ngsummary.json
#	aot/dist/ng2ComponentFactory.ngsummary.json
#	aot/dist/ng2FrameworkComponentWrapper.ngsummary.json
#	aot/dist/ng2FrameworkFactory.ngsummary.json
#	aot/main.ngsummary.json
#	aot/src/agGridColumn.ngfactory.ts
#	aot/src/agGridColumn.ngsummary.json
#	aot/src/agGridNg2.ngfactory.ts
#	aot/src/agGridNg2.ngsummary.json
#	aot/src/aggrid.module.ngfactory.ts
#	aot/src/aggrid.module.ngsummary.json
#	aot/src/baseComponentFactory.ngsummary.json
#	aot/src/interfaces.ngsummary.json
#	aot/src/ng2ComponentFactory.ngsummary.json
#	aot/src/ng2FrameworkComponentWrapper.ngsummary.json
#	aot/src/ng2FrameworkFactory.ngsummary.json

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ag-grid-react-example",
-  "version": "13.0.1",
+  "version": "13.1.0",
   "description": "Example Reach applicaiton using ag-Grid.",
   "main": "dist/ag-grid-react-example.js",
   "scripts": {
@@ -68,8 +68,8 @@
     "react-redux": "5.0.x",
     "redux": "3.6.x",
     "url-search-params-polyfill": "1.2.0",
-    "ag-grid": "13.0.x",
+    "ag-grid": "13.1.x",
-    "ag-grid-enterprise": "13.0.x",
+    "ag-grid-enterprise": "13.1.x",
-    "ag-grid-react": "13.0.x"
+    "ag-grid-react": "13.1.x"
   }
 }

src/App.jsx

@@ -13,6 +13,7 @@ import FilterComponentExample from "./filterComponentExample/FilterComponentExam
 import MasterDetailExample from "./masterDetailExample/MasterDetailExample";
 import SimpleReduxExample from "./simpleReduxExample/SimpleReduxExample";
 import FloatingFilterGridExample from "./floatingFilter/FloatingFilterGridExample";
+import SimpleReduxDynamicExample from "./simpleReduxDynamicComponentExample/SimpleReduxExample";
 
 class App extends Component {
     constructor(props) {
@@ -52,6 +53,7 @@ class App extends Component {
                     <li role="presentation" className={this.state.example === 'floating-filter' ? 'active' : null} onClick={() => this.setExample("floating-filter")}><a href="#">Floating Filters</a></li>
                     <li role="presentation" className={this.state.example === 'master-detail' ? 'active' : null} onClick={() => this.setExample("master-detail")}><a href="#">Master Detail Example</a></li>
                     <li role="presentation" className={this.state.example === 'simple-redux' ? 'active' : null} onClick={() => this.setExample("simple-redux")}><a href="#">Simple Redux Example</a></li>
+                    <li role="presentation" className={this.state.example === 'simple-redux-dynamic' ? 'active' : null} onClick={() => this.setExample("simple-redux-dynamic")}><a href="#">Simple Redux Dynamic Component Example</a></li>
                 </ul>)
         }
 
@@ -87,6 +89,9 @@ class App extends Component {
             case 'floating-filter':
                 example = <FloatingFilterGridExample/>;
                 break;
+            case 'simple-redux-dynamic':
+                example = <SimpleReduxDynamicExample/>;
+                break;
             default:
                 example = <RichGridExample/>;
         }

src/index.html

@@ -17,6 +17,10 @@
             margin-right: 4px;
         }
 
+        .align-right {
+            text-align: right
+        }
+
         .customHeaderMenuButton {
             margin-left: 4px;
             float: left;

src/richGridExample/ColDefFactory.jsx

@@ -16,12 +16,7 @@ export default class ColDefFactory {
                 checkboxSelection: true,
                 suppressSorting: true,
                 suppressMenu: true,
-                pinned: true,
+                pinned: true
-                icons: {
-                    checkboxChecked: '<i class="fa fa-arrow-left"/>',
-                    checkboxUnchecked: '<i class="fa fa-arrow-right"/>',
-                    checkboxIndeterminate: '<i class="fa fa-arrow-up"/>'
-                }
             },
             {
                 headerName: 'Employee',

src/richGridExample/RichGridExample.jsx

@@ -6,7 +6,6 @@ import DateComponent from "./DateComponent.jsx";
 import SortableHeaderComponent from "./SortableHeaderComponent";
 
 import "./RichGridExample.css";
-
 // take this line out if you do not want to use ag-Grid-Enterprise
 import "ag-grid-enterprise";
 
@@ -29,7 +28,10 @@ export default class RichGridExample extends Component {
                 groupExpanded: '<i class="fa fa-minus-square-o"/>',
                 groupContracted: '<i class="fa fa-plus-square-o"/>',
                 columnGroupOpened: '<i class="fa fa-minus-square-o"/>',
-                columnGroupClosed: '<i class="fa fa-plus-square-o"/>'
+                columnGroupClosed: '<i class="fa fa-plus-square-o"/>',
+                checkboxChecked: '<i class="fa fa-arrow-left"/>',
+                checkboxUnchecked: '<i class="fa fa-arrow-right"/>',
+                checkboxIndeterminate: '<i class="fa fa-arrow-up"/>'
             }
         };
 
@@ -119,7 +121,7 @@ export default class RichGridExample extends Component {
         // simply wait for the next tick
         setTimeout(() => {
             this.gridOptions.api.onFilterChanged();
-        },0)
+        }, 0)
     }
 
     render() {
@@ -153,7 +155,9 @@ export default class RichGridExample extends Component {
                         <span>
                             Grid API:
                             {/* use ref to access the api in selectAll */}
-                            <button onClick={() => { this.refs.myGrid.api.selectAll() }}>Select All</button>
+                            <button onClick={() => {
+                                this.refs.myGrid.api.selectAll()
+                            }}>Select All</button>
                             <button onClick={this.deselectAll.bind(this)}>Clear Selection</button>
                         </span>
                         <span style={{marginLeft: 20}}>

src/simpleReduxDynamicComponentExample/GridComponent.jsx

@@ -0,0 +1,57 @@
+import React, {Component} from "react";
+
+import {AgGridReact} from "ag-grid-react";
+import {connect} from "react-redux";
+
+import PriceRenderer from "./PriceRenderer";
+
+/*
+ * This component serves to display the row data (provided by redux)
+ */
+class GridComponent extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            columnDefs: [
+                {headerName: 'Symbol', field: 'symbol'},
+                {headerName: 'Price', field: 'price', cellClass: 'align-right', cellRendererFramework: PriceRenderer}
+            ]
+        };
+
+        this.onGridReady = this.onGridReady.bind(this);
+    }
+
+    onGridReady(params) {
+        this.gridApi = params.api;
+        this.columnApi = params.columnApi;
+
+        this.gridApi.sizeColumnsToFit();
+    }
+
+    // row data will be provided via redux on this.props.rowData
+    render() {
+        return (
+            <div style={{height: 400, width: 945, marginTop: 15}}
+                 className="ag-fresh">
+                <AgGridReact
+                    // properties
+                    columnDefs={this.state.columnDefs}
+                    rowData={this.props.rowData}
+
+                    // events
+                    onGridReady={this.onGridReady}>
+                </AgGridReact>
+            </div>
+        )
+    }
+}
+
+// pull off row data changes
+export default connect(
+    (state) => {
+        return {
+            rowData: state.rowData
+        }
+    }
+)(GridComponent);

src/simpleReduxDynamicComponentExample/HeaderComponent.jsx

@@ -0,0 +1,85 @@
+import React, {Component} from "react";
+import {connect} from "react-redux";
+// take this line out if you do not want to use ag-Grid-Enterprise
+import "ag-grid-enterprise";
+
+import {setCurrency, updateRowData} from "./gridDataActions";
+
+/*
+ * This component serves both to host the demo controls, which in turn will drive row data state changes
+ */
+class HeaderComponent extends Component {
+    constructor(props) {
+        super(props);
+    }
+
+    componentDidMount() {
+        // provide the initial data to the store (which in turn will populate the grid)
+        this.props.dispatch(updateRowData(this.createRowData()));
+    }
+
+    setCurrency(currencySymbol, exchangeRate) {
+        this.props.dispatch(setCurrency(currencySymbol, exchangeRate));
+    }
+
+    render() {
+        return (
+            <div style={{marginTop: 15}}>
+                <button onClick={this.setCurrency.bind(this, '£', 1)}>Set Currency to GBP</button>
+                <button onClick={this.setCurrency.bind(this, '$', 1.29)}>Set Currency to USD</button>
+            </div>
+        )
+    }
+
+    // the following methods are for creating dummy row data
+    createRowData() {
+        let rowData = [];
+
+        for (let i = 0; i < 14; i++) {
+            let newItem = this.createItem();
+            rowData.push(newItem);
+        }
+
+        return rowData;
+    }
+
+    createItem() {
+        return {
+            symbol: this.createUniqueRandomSymbol(),
+            price: Math.floor(Math.random() * 100)
+        };
+    }
+
+    // creates a unique symbol, eg 'ADG' or 'ZJD'
+    createUniqueRandomSymbol() {
+        let symbol;
+        let possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+
+        let isUnique = false;
+        while (!isUnique) {
+            symbol = '';
+            // create symbol
+            for (let i = 0; i < 3; i++) {
+                symbol += possible.charAt(Math.floor(Math.random() * possible.length));
+            }
+            // check uniqueness
+            isUnique = true;
+            this.props.rowData.forEach(function (oldItem) {
+                if (oldItem.symbol === symbol) {
+                    isUnique = false;
+                }
+            });
+        }
+
+        return symbol;
+    }
+}
+
+// pull off row data
+export default connect(
+    (state) => {
+        return {
+            rowData: state.rowData
+        }
+    }
+)(HeaderComponent);

src/simpleReduxDynamicComponentExample/PriceRenderer.jsx

@@ -0,0 +1,37 @@
+import React, {Component} from "react";
+import {connect} from "react-redux";
+
+class PriceRenderer extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            convertedValue: this.applyExchangeRate(props.exchangeRate, props.value)
+        };
+    }
+
+    componentWillReceiveProps(nextProps) {
+        this.setState({
+            convertedValue: this.applyExchangeRate(nextProps.exchangeRate, nextProps.value)
+        })
+    }
+
+    render() {
+        return (
+            <span>{this.props.currencySymbol}{this.state.convertedValue}</span>
+        );
+    }
+
+    applyExchangeRate = (exchangeRate, value) => {
+        return parseFloat(value * exchangeRate).toFixed(2); // simplified/naive exchange rate implementation!
+    }
+}
+
+export default connect(
+    (state) => {
+        return {
+            currencySymbol: state.currencySymbol,
+            exchangeRate: state.exchangeRate
+        }
+    }
+)(PriceRenderer);

src/simpleReduxDynamicComponentExample/SimpleReduxExample.jsx

@@ -0,0 +1,34 @@
+import React, {Component} from "react";
+import {Provider} from "react-redux";
+import {createStore} from "redux";
+// take this line out if you do not want to use ag-Grid-Enterprise
+import "ag-grid-enterprise";
+
+import HeaderComponent from "./HeaderComponent";
+import GridComponent from "./GridComponent";
+
+import gridData from "./gridDataReducer";
+
+let store = createStore(gridData);
+
+/*
+ * This component serves as a container for both the header and grid components. It's primarily here to act as a container
+ * for the redux Provider
+ */
+export default class SimpleReduxExample extends Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <Provider store={store}>
+                <div>
+                    <h1>Simple Redux Example using Connected React Components</h1>
+                    <HeaderComponent />
+                    <GridComponent />
+                </div>
+            </Provider>
+        )
+    }
+};

src/simpleReduxDynamicComponentExample/gridDataActions.jsx

@@ -0,0 +1,13 @@
+export function updateRowData(rowData) {
+    return {
+        type: 'ROW_DATA_CHANGED',
+        rowData
+    }
+}
+export function setCurrency(currencySymbol, exchangeRate) {
+    return {
+        type: 'CURRENCY_CHANGED',
+        currencySymbol,
+        exchangeRate
+    }
+}

src/simpleReduxDynamicComponentExample/gridDataReducer.jsx

@@ -0,0 +1,17 @@
+export default (state = {rowData: [], currencySymbol: '£', exchangeRate: 1}, action) => {
+    switch (action.type) {
+        case 'ROW_DATA_CHANGED':
+            return {
+                ...state,
+                rowData: action.rowData,
+            };
+        case 'CURRENCY_CHANGED':
+            return {
+                ...state,
+                currencySymbol: action.currencySymbol,
+                exchangeRate: action.exchangeRate
+            };
+        default:
+            return state;
+    }
+};