Release 8.2.0

more docs work
Merge branch '8.1.0'
2017-03-08 14:43:47 +01:00 · 2017-02-24 15:09:48 +00:00 · 2017-02-20 13:11:50 +00:00 · 2017-02-20 12:49:05 +00:00 · 2017-02-09 15:48:33 +00:00 · 2017-02-09 14:14:07 +00:00
13 changed files with 9061 additions and 19 deletions
--- a/index.html
+++ b/index.html
@@ -16,6 +16,105 @@
            margin-left: 4px;
            margin-right: 4px;
        }
+
+        .customHeaderMenuButton{
+            margin-top: 5px;
+            margin-left: 4px;
+            float: left;
+        }
+
+        .customHeaderLabel{
+            margin-left: 5px;
+            margin-top: 3px;
+            float: left;
+        }
+
+        .customSortDownLabel{
+            float: left;
+            margin-left: 10px;
+            margin-top: 5px;
+        }
+
+        .customSortUpLabel{
+            float: left;
+            margin-left: 3px;
+            margin-top: 4px;
+        }
+
+        .customSortRemoveLabel{
+            float: left;
+            font-size: 11px;
+            margin-left: 3px;
+            margin-top: 6px;
+        }
+
+        .active {
+            color: cornflowerblue;
+        }
+
+        .hidden { display:none; }
+
+
+        .customHeaderLabel{
+            margin-left: 5px;
+            margin-top: 3px;
+            float: left;
+        }
+
+        .customExpandButton{
+            float:right;
+            margin-top: 5px;
+            margin-left: 3px;
+        }
+
+        .expanded {
+            animation-name: toExpanded;
+            animation-duration: 1s;
+            -ms-transform: rotate(180deg); /* IE 9 */
+            -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
+            transform: rotate(180deg);
+        }
+
+        .collapsed {
+            color: cornflowerblue;
+            animation-name: toCollapsed;
+            animation-duration: 1s;
+            -ms-transform: rotate(0deg); /* IE 9 */
+            -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
+            transform: rotate(0deg);
+        }
+
+
+
+        @keyframes  toExpanded{
+            from {
+                color: cornflowerblue;
+                -ms-transform: rotate(0deg); /* IE 9 */
+                -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
+                transform: rotate(0deg);
+            }
+            to {
+                color: black;
+                -ms-transform: rotate(180deg); /* IE 9 */
+                -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
+                transform: rotate(180deg);
+            }
+        }
+
+        @keyframes toCollapsed{
+            from {
+                color: black;
+                -ms-transform: rotate(180deg); /* IE 9 */
+                -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
+                transform: rotate(180deg);
+            }
+            to {
+                color: cornflowerblue;
+                -ms-transform: rotate(0deg); /* IE 9 */
+                -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
+                transform: rotate(0deg);
+            }
+        }
    </style>

    <body>
--- a/olympicWinners.json
+++ b/olympicWinners.json
--- a/package.json
+++ b/package.json
@@ -1,11 +1,14 @@
 {
  "name": "ag-grid-react-example",
-  "version": "7.2.0",
+  "version": "8.2.0",
  "description": "Example Reach applicaiton using ag-Grid.",
  "main": "dist/ag-grid-react-example.js",
  "scripts": {
    "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"
+    "grouped": "webpack-dev-server --config webpack.config.grouped.js --progress --colors --hot --inline",
+    "large": "webpack-dev-server --config webpack.config.large.js --progress --colors --hot --inline",
+    "clean": "rimraf dist",
+    "build-standard": "npm run clean && webpack --config webpack.config.standard.js --progress --profile --bail"
  },
  "repository": {
    "type": "git",
@@ -34,10 +37,13 @@
    "webpack-dev-server": "^1.14.1"
  },
  "dependencies": {
+    "rimraf": "2.5.x",
    "react": "0.14.6",
    "react-dom": "0.14.6",
-    "ag-grid": "7.2.x",
-    "ag-grid-enterprise": "7.2.x",
-    "ag-grid-react": "7.2.x"
+    "ag-grid": "8.2.x",
+    "ag-grid-enterprise": "8.2.x",
+    "ag-grid-react": "8.2.x"
  }
 }
+
+
--- a/src-grouped/ColDefFactory.jsx
+++ b/src-grouped/ColDefFactory.jsx
@@ -0,0 +1,17 @@
+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}
+        ];
+    }
+}
+
--- a/src-grouped/index.js
+++ b/src-grouped/index.js
@@ -0,0 +1,18 @@
+'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
+    );
+});
--- a/src-grouped/myApp.css
+++ b/src-grouped/myApp.css
@@ -0,0 +1,28 @@
+
+.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%;
+}
--- a/src-grouped/myApp.jsx
+++ b/src-grouped/myApp.jsx
@@ -0,0 +1,99 @@
+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 += '<img class="flag" border="0" width="20" height="15" src="https://flags.fmcdn.net/data/flags/mini/' + flagCode + '.png">'
+                }
+
+                html += '<span class="groupTitle"> COUNTRY_NAME</span>'.replace('COUNTRY_NAME', params.node.key);
+                html += '<span class="medal gold"> Gold: GOLD_COUNT</span>'.replace('GOLD_COUNT', params.data.gold);
+                html += '<span class="medal silver"> Silver: SILVER_COUNT</span>'.replace('SILVER_COUNT', params.data.silver);
+                html += '<span class="medal bronze"> Bronze: BRONZE_COUNT</span>'.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 = (
+            <div style={{height: 400}} className="ag-fresh">
+                <AgGridReact
+                    // gridOptions is optional - it's possible to provide
+                    // all values as React props
+                    gridOptions={this.gridOptions}
+
+                    // listening for events
+                    onGridReady={this.onGridReady.bind(this)}
+
+                    // binding to array properties
+                    columnDefs={this.state.columnDefs}
+                    rowData={this.state.rowData}
+
+                    groupUseEntireRow="true"
+                />
+            </div>
+        );
+
+        return <div style={{width: '800px'}}>
+            <div>
+                {gridTemplate}
+            </div>
+        </div>;
+    }
+
+}
--- a/src-standard/ColDefFactory.jsx
+++ b/src-standard/ColDefFactory.jsx
@@ -4,6 +4,7 @@ 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 {

@@ -14,22 +15,28 @@ export default class ColDefFactory {
                suppressMenu: true, pinned: true},
            {
                headerName: 'Employee',
+                headerGroupComponentFramework: MyReactHeaderGroupComponent,
                children: [
-                    {headerName: "Name", field: "name", enableRowGroup: true, enablePivot: true,
+                    {
+                        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,
+                    }, {
+                        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}}
-                    ,
-                    {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();
-                    }}
+                        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'
+                    }
                ]
            },
            {
@@ -41,7 +48,7 @@ export default class ColDefFactory {
                        // supply a React component
                        filterFramework: SkillsFilter
                    },
-                    {headerName: "Proficiency", field: "proficiency", width: 120, enableValue: true,
+                    {headerName: "Proficiency", field: "proficiency", width: 135, enableValue: true,
                        // supply a React component
                        cellRendererFramework: ProficiencyCellRenderer,
                        // supply a React component
--- a/src-standard/MyReactHeaderComponent.jsx
+++ b/src-standard/MyReactHeaderComponent.jsx
@@ -0,0 +1,76 @@
+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(<div className={downArrowClass} onClick={this.onSortRequested.bind(this, 'desc')}><i className="fa fa-long-arrow-down"/></div>)
+            sortElements.push(<div className={upArrowClass} onClick={this.onSortRequested.bind(this, 'asc')}><i className="fa fa-long-arrow-up"/></div>)
+            sortElements.push(<div className={removeArrowClass} onClick={this.onSortRequested.bind(this, '')}><i className="fa fa-times"/></div>)
+        }
+
+
+        let menuButton = null;
+        if (this.props.enableMenu){
+            menuButton = <div ref="menuButton" className="customHeaderMenuButton" onClick={this.onMenuClick.bind(this)}><i className={"fa " + this.props.menuIcon}/></div>
+        }
+
+        return <div>
+            {menuButton}
+            <div className="customHeaderLabel">{this.props.displayName}</div>
+            {sortElements}
+        </div>
+    }
+
+    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
+};
--- a/src-standard/MyReactHeaderGroupComponent.jsx
+++ b/src-standard/MyReactHeaderGroupComponent.jsx
@@ -0,0 +1,41 @@
+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 <div>
+            <div className="customHeaderLabel"> {this.props.displayName}</div>
+            <div onClick={this.expandOrCollapse.bind(this)} className={arrowClassName}><i className="fa fa-arrow-right" /></div>
+        </div>
+    }
+
+    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
+};
--- a/src-standard/RowDataFactory.js
+++ b/src-standard/RowDataFactory.js
@@ -5,7 +5,7 @@ export default class RowDataFactory {
    createRowData() {
        var rowData = [];

-        for (var i = 0; i < 1000; i++) {
+        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],
--- a/src-standard/myApp.jsx
+++ b/src-standard/myApp.jsx
@@ -3,6 +3,7 @@ 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";
 import "ag-grid-enterprise";

@@ -44,6 +45,12 @@ export default class MyApp extends React.Component {
            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
        };
@@ -197,13 +204,12 @@ export default class MyApp extends React.Component {
                        enableFilter="true"
                        groupHeaders="true"
                        rowHeight="22"
-                        debug="true"
                    />
                </div>
            );
        }

-        return <div style={{width: '800px'}}>
+        return <div style={{width: '1024px'}}>
            <div style={{padding: '4px'}}>
                {topHeaderTemplate}
                {bottomHeaderTemplate}
--- a/webpack.config.grouped.js
+++ b/webpack.config.grouped.js
@@ -0,0 +1,27 @@
+module.exports = {
+    entry: "./src-grouped/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
Alberto	cf1be920ee	Release 8.2.0	2017-03-08 14:43:47 +01:00
Sean Landsman	f8ad31c2e0	more docs work	2017-02-24 15:09:48 +00:00
Alberto	e026fb65e3	Merge branch '8.1.0'	2017-02-20 13:11:50 +00:00
Alberto	05a7371467	8.1.0	2017-02-20 12:49:05 +00:00
Alberto	4ea0b7f8b2	Merge branch '8.0.0'	2017-02-09 15:48:33 +00:00
Alberto	5904f47d55	8.0.0	2017-02-09 14:14:07 +00:00
Alberto	25b416b71d	Getting ready for releasing 8.0.0	2017-02-09 13:59:26 +00:00
Alberto	abb7828921	Getting ready for releasing 8.0.0	2017-02-09 13:58:19 +00:00
Alberto	ad5fd2d1ce	ag-49 Ng2 Header component	2017-02-07 10:00:52 +00:00
Alberto	6d686f1c02	ag-49 Custom Group Header example completed	2017-02-03 11:16:17 +00:00
Alberto	6376a24e3a	ag-49 Custom Header example completed	2017-02-03 10:14:20 +00:00
Sean Landsman	9c8cf08d2a	AG-195 Create react example using grouped data	2017-01-26 11:40:46 +00:00