iteration

2016-01-27 15:44:45 +00:00
parent 8f24610243
commit d762f4a1f5
3 changed files with 40 additions and 3 deletions
--- a/index.html
+++ b/index.html
@@ -7,6 +7,14 @@
        <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    </head>

+    <!-- Put some spacing around the buttons - not needed, just makes it look nice -->
+    <style>
+        button {
+            margin-left: 4px;
+            margin-right: 4px;
+        }
+    </style>
+
    <body>
        <div id="myAppContainer"></div>
    </body>
--- a/package.json
+++ b/package.json
@@ -33,7 +33,7 @@
  "dependencies": {
    "react": "0.14.6",
    "react-dom": "0.14.6",
-    "ag-grid": "latest",
-    "ag-grid-react-component": "latest"
+    "ag-grid": "3.2.2",
+    "ag-grid-react-component": "3.2.2"
  }
 }
--- a/src/myApp.jsx
+++ b/src/myApp.jsx
@@ -91,6 +91,34 @@ export default class MyApp extends React.Component {
        });
    }

+    render() {
+        return (
+            // ag-Grid comes with a React Component waiting to be used
+            <AgGridReact
+
+                // listen for events with React callbacks
+                onRowSelected={this.onRowSelected.bind(this)}
+                onCellClicked={this.onCellClicked.bind(this)}
+
+                // binding to properties within React State or Props
+                showToolPanel={this.state.showToolPanel}
+                quickFilterText={this.state.quickFilterText}
+                icons={this.state.icons}
+
+                // column definitions and row data are immutable, the grid
+                // will update when these lists change
+                columnDefs={this.state.columnDefs}
+                rowData={this.state.rowData}
+
+                // or provide props the old way with no binding
+                rowSelection="multiple"
+                enableSorting="true"
+                enableFilter="true"
+                rowHeight="22"
+            />
+        );
+    }
+
    render() {
        var gridTemplate;
        var bottomHeaderTemplate;
@@ -139,7 +167,8 @@ export default class MyApp extends React.Component {
            gridTemplate = (
                <div style={{height: 400}} className="ag-fresh">
                    <AgGridReact
-                        // gridOptions is optional - it's possible to provide all values as React props
+                        // gridOptions is optional - it's possible to provide
+                        // all values as React props
                        gridOptions={this.gridOptions}

                        // listening for events