mohiit1502/ag-grid-react-example
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve react examples

Browse Source
This commit is contained in:
Sean Landsman
2017-09-15 16:56:08 +01:00
parent c4310c2768
commit ad6bc068b2
26 changed files with 525 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
package.json
View File

@@ -58,6 +58,9 @@
"typescript": "2.3.x"
},
"dependencies": {
"ag-grid": "13.1.x",
"ag-grid-enterprise": "13.1.x",
"ag-grid-react": "13.1.x",
"bootstrap": "3.3.7",
"d3": "4.9.1",
"file-loader": "0.11.1",
@@ -66,10 +69,8 @@
"react-dom": "15.6.x",
"react-dom-factories": "1.0.0",
"react-redux": "5.0.x",
"react-router-dom": "4.2.x",
"redux": "3.6.x",
"url-search-params-polyfill": "1.2.0",
"ag-grid": "13.1.x",
"ag-grid-enterprise": "13.1.x",
"ag-grid-react": "13.1.x"
"url-search-params-polyfill": "1.2.0"
}
}

53
src/App.jsx
View File

@@ -1,6 +1,7 @@
import React, {Component} from "react";
import {Redirect, Route, Switch} from "react-router-dom";
import "url-search-params-polyfill";
import NavItem from "./NavItem";
import DynamicComponentsExample from "./dynamicComponentExample/DynamicComponentsExample";
import RichGridExample from "./richGridExample/RichGridExample";
@@ -15,6 +16,55 @@ import SimpleReduxExample from "./simpleReduxExample/SimpleReduxExample";
import FloatingFilterGridExample from "./floatingFilter/FloatingFilterGridExample";
import SimpleReduxDynamicExample from "./simpleReduxDynamicComponentExample/SimpleReduxExample";
const SideBar = () => (
<div style={{float: "left", width: 335, marginRight: 25}}>
<ul className="nav nav-pills nav-stacked">
<NavItem to='/rich-grid'>Rich Grid Example</NavItem>
<NavItem to='/dynamic'>Dynamic React Component Example</NavItem>
<NavItem to='/rich-dynamic'>Dynamic React Components - Richer Example</NavItem>
<NavItem to='/editor'>Cell Editor Component Example</NavItem>
<NavItem to='/floating-row'>Floating Row Renderer Example</NavItem>
<NavItem to='/full-width'>Full Width Renderer Example</NavItem>
<NavItem to='/group-row'>Grouped Row Inner Renderer Example</NavItem>
<NavItem to='/filter'>Filters Component Example</NavItem>
<NavItem to='/master-detail'>Master Detail Example</NavItem>
<NavItem to='/floating-filter'>Floating Filters</NavItem>
<NavItem to='/simple-redux'>Simple Redux Example</NavItem>
<NavItem to='/simple-redux-dynamic'>Simple Redux Dynamic Component Example</NavItem>
</ul>
</div>
);
class App extends Component {
render() {
return (
<div style={{display: "inline-block", width: "100%"}}>
<SideBar/>
<div style={{float: "left"}}>
<Switch>
<Redirect from="/" exact to="/rich-grid"/>
<Route exact path='/rich-grid' component={RichGridExample}/>
<Route exact path='/dynamic' component={DynamicComponentsExample}/>
<Route exact path='/rich-dynamic' component={RichComponentsExample}/>
<Route exact path='/editor' component={EditorComponentsExample}/>
<Route exact path='/floating-row' component={PinnedRowComponentExample}/>
<Route exact path='/full-width' component={FullWidthComponentExample}/>
<Route exact path='/group-row' component={GroupedRowInnerRendererComponentExample}/>
<Route exact path='/filter' component={FilterComponentExample}/>
<Route exact path='/master-detail' component={MasterDetailExample}/>
<Route exact path='/floating-filter' component={FloatingFilterGridExample}/>
<Route exact path='/simple-redux' component={SimpleReduxExample}/>
<Route exact path='/simple-redux-dynamic' component={SimpleReduxDynamicExample}/>
</Switch>
</div>
</div>
)
}
}
export default App
/*
class App extends Component {
constructor(props) {
super(props);
@@ -106,3 +156,4 @@ class App extends Component {
}
export default App
*/

19
src/NavItem.jsx Normal file
View File

@@ -0,0 +1,19 @@
import React, {PropTypes} from 'react'
import {Route, Link} from 'react-router-dom'
// for bootstrap li active functionality
export default function NavItem({children, to, exact}) {
return (
<Route path={to} exact={exact} children={({match}) => (
<li className={match ? 'active' : null}>
<Link to={to}>{children}</Link>
</li>
)}/>
)
}
NavItem.propTypes = {
to: PropTypes.string.isRequired,
exact: PropTypes.bool,
children: PropTypes.node.isRequired,
};

2
src/dynamicComponentExample/ChildMessageRenderer.jsx
View File

@@ -13,7 +13,7 @@ export default class ChildMessageRenderer extends Component {
render() {
return (
<span><button style={{height: 20}} onClick={this.invokeParentMethod}>Invoke Parent</button></span>
<span><button style={{height: 20, lineHeight: 0.5}} onClick={this.invokeParentMethod} className="btn btn-info">Invoke Parent</button></span>
);
}
};

16
src/dynamicComponentExample/CurrencyRenderer.jsx
View File

@@ -3,15 +3,29 @@ import React, {Component} from "react";
export default class CurrencyRenderer extends Component {
constructor(props) {
super(props);
this.state = {
value: props.value
}
}
formatValueToCurrency(currency, value) {
return `${currency}${value}`
}
// noinspection JSUnusedGlobalSymbols
refresh(params) {
if(params.value !== this.state.value) {
this.setState({
value: params.value.toFixed(2)
})
}
return true;
}
render() {
return (
<span>{this.formatValueToCurrency('EUR', this.props.value)}</span>
<span>{this.formatValueToCurrency('EUR', this.state.value)}</span>
);
}
};

66
src/dynamicComponentExample/DynamicComponentsExample.jsx
View File

@@ -18,13 +18,13 @@ export default class DynamicComponentsExample extends Component {
}
},
rowData: this.createRowData(),
rowData: DynamicComponentsExample.createRowData(),
columnDefs: this.createColumnDefs()
columnDefs: DynamicComponentsExample.createColumnDefs()
};
this.onGridReady = this.onGridReady.bind(this);
this.refreshRowData = this.refreshRowData.bind(this);
this.refreshEvenRowsCurrencyData = this.refreshEvenRowsCurrencyData.bind(this);
}
onGridReady(params) {
@@ -34,22 +34,30 @@ export default class DynamicComponentsExample extends Component {
this.gridApi.sizeColumnsToFit();
}
onCellValueChanged($event) {
this.gridApi.refreshCells([$event.node],["cube"]);
}
methodFromParent(cell) {
alert(`Parent Component Method from ${cell}!`);
}
createColumnDefs() {
refreshEvenRowsCurrencyData() {
this.gridApi.forEachNode(rowNode => {
if (rowNode.data.value % 2 === 0) {
rowNode.setDataValue('currency', rowNode.data.value + Number(Math.random().toFixed(2)))
}
});
this.gridApi.refreshCells({
columns: ['currency']
})
}
static createColumnDefs() {
return [
{headerName: "Row", field: "row", width: 100},
{
headerName: "Square",
field: "value",
cellRendererFramework: SquareRenderer,
editable:true,
editable: true,
colId: "square",
width: 100
},
@@ -71,7 +79,7 @@ export default class DynamicComponentsExample extends Component {
headerName: "Currency",
field: "currency",
cellRendererFramework: CurrencyRenderer,
colId: "params",
colId: "currency",
width: 135
},
{
@@ -84,12 +92,7 @@ export default class DynamicComponentsExample extends Component {
];
}
refreshRowData() {
let rowData = this.createRowData();
this.gridApi.setRowData(rowData);
}
createRowData() {
static createRowData() {
let rowData = [];
for (let i = 0; i < 15; i++) {
@@ -102,12 +105,13 @@ export default class DynamicComponentsExample extends Component {
return rowData;
}
render() {
return (
<div style={{height: 400, width: 945}}
<div style={{height: 400, width: 900}}
className="ag-fresh">
<h1>Dynamic React Component Example</h1>
<button onClick={this.refreshRowData}>Refresh Data</button>
<button onClick={this.refreshEvenRowsCurrencyData} style={{marginBottom: 10}} className="btn btn-primary">Refresh Even Row Currency Data</button>
<AgGridReact
// properties
columnDefs={this.state.columnDefs}
@@ -117,6 +121,32 @@ export default class DynamicComponentsExample extends Component {
// events
onGridReady={this.onGridReady}>
</AgGridReact>
<div className="row">
<div className="col-sm-12"><h1>Dynamic React Component Example</h1></div>
</div>
<div className="row">
<div className="col-sm-12">
<h5>This example demonstrates Dynamic React Components with ag-Grid, Parent/Child Communication (cell component to parent grid component), as well as
dynamic data updates of the <code>Currency</code> column.</h5>
<p><span style={{fontWeight: "bold"}}>Square, Cube, Row Params, Currency and Child/Parent</span>: React Components within the Grid</p>
<p><span style={{fontWeight: "bold"}}>Currency (Pipe)</span>: An React Component mimicking a Currency Pipe, dynamically updated with the button above.</p>
<p><span style={{fontWeight: "bold"}}>Child/Parent</span>: Demonstrates the Child Cell Component communicating with the Parent Grid Component.</p>
<p><span style={{fontWeight: "bold"}}>Refresh Even Row Currency Data</span>: Dynamically Updates Event Rows Currency Value. Only the Currency column will be re-rendered.</p>
</div>
</div>
<div className="row">
<div className="col-sm-12">
<div className="card">
<div className="card-body">
<h4 className="card-title">React Functionality</h4>
<p className="card-text">Utilise React Components within ag-Grid</p>
<a target="_blank" href="https://www.ag-grid.com/best-react-data-grid/?framework=react" className="btn btn-primary">React with ag-Grid</a>
<a target="_blank" href="https://www.ag-grid.com/javascript-grid-cell-rendering-components/?framework=react" className="btn btn-primary">React Renderers</a>
<a target="_blank" href="https://www.ag-grid.com/javascript-grid-data-update/" className="btn btn-primary">Updating Data</a>
</div>
</div>
</div>
</div>
</div>
);
}

62
src/editorComponentExample/EditorComponentsExample.jsx
View File

@@ -10,8 +10,8 @@ export default class EditorComponentsExample extends Component {
super(props);
this.state = {
rowData: this.createRowData(),
columnDefs: this.createColumnDefs()
rowData: EditorComponentsExample.createRowData(),
columnDefs: EditorComponentsExample.createColumnDefs()
};
this.onGridReady = this.onGridReady.bind(this);
@@ -24,9 +24,32 @@ export default class EditorComponentsExample extends Component {
this.gridApi.sizeColumnsToFit();
}
createColumnDefs() {
static createColumnDefs() {
return [
{headerName: "Name", field: "name", width: 300},
{
headerName: "Name",
field: "name",
width: 300,
editable: true,
cellEditor: 'richSelect',
cellEditorParams: {
values: [
"Bob",
"Harry",
"Sally",
"Mary",
"John",
"Jack",
"Sue",
"Sean",
"Niall",
"Albert",
"Fred",
"Jenny",
"Larry"
]
}
},
{
headerName: "Mood",
field: "mood",
@@ -45,7 +68,7 @@ export default class EditorComponentsExample extends Component {
];
}
createRowData() {
static createRowData() {
return [
{name: "Bob", mood: "Happy", number: 10},
{name: "Harry", mood: "Sad", number: 3},
@@ -65,7 +88,7 @@ export default class EditorComponentsExample extends Component {
render() {
return (
<div style={{height: 400, width: 945}}
<div style={{height: 370, width: 900}}
className="ag-fresh">
<h1>Cell Editor Component Example</h1>
<AgGridReact
@@ -76,7 +99,34 @@ export default class EditorComponentsExample extends Component {
// events
onGridReady={this.onGridReady}>
</AgGridReact>
<div className="row">
<div className="col-sm-12"><h1>Cell Editor Component Example</h1></div>
</div>
<div className="row">
<div className="col-sm-12">
<h5>This example demonstrates React Editor Components within ag-Grid, as well as an example using the built in Rich Select editor.</h5>
<p><span style={{fontWeight: "bold"}}>Name</span>: Utilises the built in <code>RichSelect</code> editor</p>
<p><span style={{fontWeight: "bold"}}>Mood</span>: A Custom React Editor demonstrating popup functionality, with full keyboard control.</p>
<p><span style={{fontWeight: "bold"}}>Numeric</span>: A Custom React Editor demonstrating pre & post validation. Only numeric characters are allowed,
and numbers greater than 1000000 will be rejected.</p>
</div>
</div>
<div className="row">
<div className="col-sm-12">
<div className="card">
<div className="card-body">
<h4 className="card-title">React Functionality</h4>
<p className="card-text">Utilise React Components within ag-Grid</p>
<a target="_blank" href="https://www.ag-grid.com/javascript-grid-cell-editing/?framework=react" className="btn btn-primary">Cell Editing</a>
<a target="_blank" href="https://www.ag-grid.com/javascript-grid-cell-editor/?framework=react" className="btn btn-primary">Editor Components</a>
<a target="_blank" href="https://www.ag-grid.com/best-react-data-grid/?framework=react" className="btn btn-primary">React with ag-Grid</a>
<a target="_blank" href="https://www.ag-grid.com/javascript-grid-cell-editor/?framework=react#reactCellEditing" className="btn btn-primary">React Editor Components</a>
</div>
</div>
</div>
</div>
</div>
);
}
};

23
src/editorComponentExample/NumericEditor.jsx
View File

@@ -1,16 +1,19 @@
import React, {Component} from "react";
import ReactDOM from "react-dom";
export default class MoodEditor extends Component {
constructor(props) {
super(props);
this.state = {
value: this.props.value
};
this.cancelBeforeStart = this.props.charPress && ('1234567890'.indexOf(this.props.charPress) < 0);
let value = this.props.value;
if (!this.cancelBeforeStart && this.props.charPress) {
value = value + this.props.charPress;
}
this.state = {
value
};
this.onKeyDown = this.onKeyDown.bind(this);
this.handleChange = this.handleChange.bind(this);
}
@@ -30,10 +33,9 @@ export default class MoodEditor extends Component {
focus() {
setTimeout(() => {
let container = ReactDOM.findDOMNode(this.refs.input);
if (container) {
container.focus();
}
this.refs.input.focus();
this.refs.input.setSelectionRange(this.state.value.length, this.state.value.length);
})
}
@@ -52,7 +54,7 @@ export default class MoodEditor extends Component {
};
onKeyDown(event) {
if(this.isLeftOrRight(event)) {
if (this.isLeftOrRight(event)) {
event.stopPropagation();
return;
}
@@ -90,6 +92,7 @@ export default class MoodEditor extends Component {
<input ref="input"
value={this.state.value}
onChange={this.handleChange}
style={{width: "100%"}}
/>
);
}

4
src/filterComponentExample/FilterComponentExample.jsx
View File

@@ -66,10 +66,10 @@ export default class FilterComponentExample extends Component {
render() {
return (
<div style={{height: 400, width: 945}}
<div style={{height: 400, width: 900}}
className="ag-fresh">
<h1>Filter Component Example</h1>
<button style={{marginBottom: 10}} onClick={this.onClicked}>Filter Instance Method</button>
<button style={{marginBottom: 10}} onClick={this.onClicked} className="btn btn-primary">Filter Instance Method</button>
<AgGridReact
// properties
columnDefs={this.state.columnDefs}

14
src/filterComponentExample/PartialMatchFilter.jsx
View File

@@ -7,7 +7,8 @@ export default class PartialMatchFilter extends Component {
this.state = {
text: ''
}
};
this.valueGetter = this.props.valueGetter;
this.onChange = this.onChange.bind(this);
@@ -63,8 +64,17 @@ export default class PartialMatchFilter extends Component {
}
render() {
let style = {
border: "2px solid #22ff22",
borderRadius: "5px",
backgroundColor: "#bbffbb",
width: "200px",
height: "50px"
};
return (
<span>Filter: <input style={{height: "20px"}} ref="input" value={this.state.text} onChange={this.onChange}/></span>
<div style={style}>Filter: <input style={{height: "20px"}} ref="input" value={this.state.text}
onChange={this.onChange} className="form-control"/></div>
);
}
};

2
src/floatingFilter/FloatingFilterGridExample.jsx
View File

@@ -44,7 +44,7 @@ export default class FloatingFilterGridExample extends Component {
render() {
let divStyle = {
height: 400,
width: 945
width: 900
};
// combine the styles

2
src/fullWidthExample/FullWidthComponentExample.jsx
View File

@@ -68,7 +68,7 @@ export default class FullWidthComponentExample extends Component {
render() {
return (
<div style={{height: 400, width: 945}}
<div style={{height: 400, width: 900}}
className="ag-fresh">
<h1>Full Width Renderer Example</h1>
<AgGridReact

8
src/fullWidthExample/NameAndAgeRenderer.jsx
View File

@@ -8,8 +8,14 @@ export default class NameAndAgeRenderer extends Component {
}
render() {
let style = {
border: "2px solid #22ff22",
borderRadius: "5px",
backgroundColor: "#bbffbb"
};
return (
<span>Full Width Column! { this.values }</span>
<div style={style}>Full Width Column! { this.values }</div>
);
}
};

2
src/groupedRowInnerRendererExample/GroupedRowInnerRendererComponentExample.jsx
View File

@@ -106,7 +106,7 @@ export default class GroupedRowInnerRendererComponentExample extends Component {
render() {
return (
<div style={{height: 400, width: 945}}
<div style={{height: 400, width: 900}}
className="ag-fresh">
<h1>Group Row Renderer Example</h1>
<AgGridReact

36
src/index.html
View File

@@ -12,6 +12,18 @@
height: 100%;
}
body {
line-height: 1
}
div.card-body > a {
margin-top: 5px
}
.btn-primary {
margin-right: 5px;
}
button {
margin-left: 4px;
margin-right: 4px;
@@ -68,8 +80,8 @@
.expanded {
animation-name: toExpanded;
animation-duration: 1s;
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
}
@@ -77,22 +89,22 @@
color: cornflowerblue;
animation-name: toCollapsed;
animation-duration: 1s;
-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
-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 */
-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 */
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
}
}
@@ -100,14 +112,14 @@
@keyframes toCollapsed {
from {
color: black;
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
-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 */
-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
transform: rotate(0deg);
}
}

5
src/index.js
View File

@@ -2,6 +2,7 @@
import React from "react";
import {render} from "react-dom";
import {BrowserRouter} from "react-router-dom";
import "ag-grid-root/dist/styles/ag-grid.css";
import "ag-grid-root/dist/styles/theme-fresh.css";
@@ -15,7 +16,9 @@ import App from "./App";
document.addEventListener('DOMContentLoaded', () => {
render(
<App/>,
<BrowserRouter>
<App/>
</BrowserRouter>,
document.querySelector('#app')
);
});

2
src/masterDetailExample/MasterDetailExample.jsx
View File

@@ -116,7 +116,7 @@ export default class MasterDetailExample extends Component {
render() {
return (
<div style={{height: 400, width: 945}}
<div style={{height: 400, width: 900}}
className="ag-fresh">
<h1>Master-Detail Example</h1>
<AgGridReact

2
src/pinnedRowExample/PinnedRowComponentExample.jsx
View File

@@ -65,7 +65,7 @@ export default class PinnedRowComponentExample extends Component {
render() {
return (
<div style={{height: 400, width: 945}}
<div style={{height: 400, width: 900}}
className="ag-fresh">
<h1>Pinned Row Renderer Example</h1>
<AgGridReact

2
src/richComponentExample/ClickableRenderer.jsx
View File

@@ -20,7 +20,7 @@ export default class ClickableRenderer extends Component {
render() {
return (
<button style={{height: 21}} onClick={this.clicked} >Click Me</button>
<button style={{lineHeight: 0.5, width: "98%"}} onClick={this.clicked} className="btn btn-info">Click Me</button>
);
}
}

27
src/richComponentExample/RichComponentsExample.jsx
View File

@@ -25,7 +25,11 @@ export default class RichComponentsExample extends Component {
createColumnDefs() {
return [
{headerName: "Name", field: "name", width: 200},
{
headerName: "Name",
field: "name",
width: 200
},
{
headerName: "Ratio Component",
field: "ratios",
@@ -60,8 +64,7 @@ export default class RichComponentsExample extends Component {
render() {
return (
<div style={{height: 400, width: 945}}
className="ag-fresh">
<div style={{height: 370, width: 900}} className="ag-fresh">
<h1>Dynamic React Components - Richer Example</h1>
<AgGridReact
// properties
@@ -72,6 +75,24 @@ export default class RichComponentsExample extends Component {
// events
onGridReady={this.onGridReady}>
</AgGridReact>
<div className="row">
<div className="col-sm-12">
<h5>This example demonstrates Dynamic React Components with ag-Grid. Functionally similar
to the <a href="/dynamic">Dynamic React Components Example</a> but with slightly richer components.</h5>
</div>
</div>
<div className="row">
<div className="col-sm-12">
<div className="card">
<div className="card-body">
<h4 className="card-title">React Functionality</h4>
<p className="card-text">Utilise React Components within ag-Grid</p>
<a target="_blank" href="https://www.ag-grid.com/best-react-data-grid/?framework=react" className="btn btn-primary">React with ag-Grid</a>
<a target="_blank" href="https://www.ag-grid.com/javascript-grid-cell-rendering-components/?framework=react" className="btn btn-primary">React Renderers</a>
</div>
</div>
</div>
</div>
</div>
);
}

10
src/richGridExample/ColDefFactory.jsx
View File

@@ -16,6 +16,7 @@ export default class ColDefFactory {
checkboxSelection: true,
suppressSorting: true,
suppressMenu: true,
suppressFilter: true,
pinned: true
},
{
@@ -32,7 +33,8 @@ export default class ColDefFactory {
editable: true,
// use a React cellEditor
cellEditorFramework: NameCellEditor
}, {
},
{
headerName: "Country",
field: "country",
width: 150,
@@ -44,9 +46,9 @@ export default class ColDefFactory {
filterParams: {
cellRenderer: countryCellRenderer,
cellHeight: 20
},
columnGroupShow: 'open'
}, {
}
},
{
headerName: "DOB",
field: "dob",
width: 110,

4
src/richGridExample/ProficiencyFilter.jsx
View File

@@ -37,6 +37,10 @@ export default class ProficiencyFilter extends React.Component {
this.setState(newState, this.props.filterChangedCallback);
}
getModel() {
return ''
}
render() {
var rows = [];
PROFICIENCY_NAMES.forEach( (name)=> {

320
src/richGridExample/RichGridExample.jsx
View File

@@ -16,7 +16,6 @@ export default class RichGridExample extends Component {
this.state = {
quickFilterText: null,
showGrid: true,
showToolPanel: false,
columnDefs: new ColDefFactory().createColDefs(),
rowData: new RowDataFactory().createRowData(),
@@ -28,10 +27,7 @@ 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"/>',
checkboxChecked: '<i class="fa fa-arrow-left"/>',
checkboxUnchecked: '<i class="fa fa-arrow-right"/>',
checkboxIndeterminate: '<i class="fa fa-arrow-up"/>'
columnGroupClosed: '<i class="fa fa-plus-square-o"/>'
}
};
@@ -55,7 +51,8 @@ export default class RichGridExample extends Component {
}
},
// this is a simple property
rowBuffer: 10 // no need to set this, the default is fine for almost all scenarios
rowBuffer: 10, // no need to set this, the default is fine for almost all scenarios,
floatingFilter: true
};
this.onGridReady = this.onGridReady.bind(this);
@@ -63,12 +60,6 @@ export default class RichGridExample extends Component {
this.onCellClicked = this.onCellClicked.bind(this);
}
onShowGrid(show) {
this.setState({
showGrid: show
});
}
onToggleToolPanel(event) {
this.setState({showToolPanel: event.target.checked});
}
@@ -125,109 +116,214 @@ export default class RichGridExample extends Component {
}
render() {
let gridTemplate;
let bottomHeaderTemplate;
let topHeaderTemplate;
topHeaderTemplate = (
<div>
<div style={{float: 'right'}}>
<input type="text" onChange={this.onQuickFilterText.bind(this)}
placeholder="Type text to filter..."/>
<button id="btDestroyGrid" disabled={!this.state.showGrid}
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>
return (
<div style={{width: '900px'}}>
<h1>Rich Grid Example</h1>
<div style={{display: "inline-block", width: "100%"}}>
<div style={{float: "left"}}>
<b>Employees Skills and Contact Details</b><span id="rowCount"/>
</div>
</div>
<div style={{padding: '4px'}}>
<b>Employees Skills and Contact Details</b> <span id="rowCount"/>
<div style={{marginTop: 10}}>
<div>
<span>
Grid API:
<button onClick={() => {
this.refs.myGrid.api.selectAll()
}} className="btn btn-primary">Select All</button>
<button onClick={this.deselectAll.bind(this)}
className="btn btn-primary">Clear Selection</button>
</span>
<span style={{float: "right"}}>
Column API:
<button onClick={this.setCountryVisible.bind(this, false)} className="btn btn-primary">Hide Country Column</button>
<button onClick={this.setCountryVisible.bind(this, true)} className="btn btn-primary">Show Country Column</button>
</span>
</div>
<div style={{display: "inline-block",width: "100%", marginTop: 10, marginBottom: 10}}>
<div style={{float: "left"}}>
<label>
<input type="checkbox" onChange={this.onToggleToolPanel.bind(this)} style={{marginRight: 5}}/>
Show Tool Panel
</label>
</div>
<div style={{float: "left", marginLeft: 20}}>
<button onClick={this.onRefreshData.bind(this)} className="btn btn-primary">Refresh Data
</button>
</div>
<div style={{float: "left", marginLeft: 20}}>
<input type="text" onChange={this.onQuickFilterText.bind(this)}
placeholder="Type text to filter..."/>
</div>
<div style={{float: "right"}}>
Filter API:
<button onClick={this.invokeSkillsFilterMethod.bind(this, false)}
className="btn btn-primary">Invoke Skills Filter Method
</button>
<button onClick={this.dobFilter.bind(this)} className="btn btn-primary">DOB equals to
01/01/2000
</button>
</div>
</div>
<div style={{height: 400, width: 900}} className="ag-fresh">
<AgGridReact
ref="myGrid"
// gridOptions is optional - it's possible to provide
// all values as React props
gridOptions={this.gridOptions}
// listening for events
onGridReady={this.onGridReady}
onRowSelected={this.onRowSelected}
onCellClicked={this.onCellClicked}
// binding to simple properties
showToolPanel={this.state.showToolPanel}
quickFilterText={this.state.quickFilterText}
// binding to an object property
icons={this.state.icons}
// binding to array properties
columnDefs={this.state.columnDefs}
rowData={this.state.rowData}
// no binding, just providing hard coded strings for the properties
suppressRowClickSelection="true"
rowSelection="multiple"
enableColResize="true"
enableSorting="true"
enableFilter="true"
groupHeaders="true"
rowHeight="22"
/>
</div>
<div>
<div className="row">
<div className="col-sm-12"><h1>Rich Grid Example</h1></div>
</div>
<div className="row">
<div className="col-sm-12">
<h5>This example demonstrates many features of ag-Grid.</h5>
<p><span style={{fontWeight: 500}}>Select All/Clear Selection</span>: Select or Deselect
All
Rows</p>
<p><span style={{fontWeight: 500}}>Hide/Show Country Column</span>: Select or Deselect
All
Rows
(expand the Employee column to show the Country column first)</p>
<p><span style={{fontWeight: 500}}>Toggle The Tool Panel</span>: Let your users Pivot,
Group
and
Aggregate using the Tool Panel</p>
<p><span style={{fontWeight: 500}}>Refresh Data</span>: Dynamically Update Grid Data</p>
<p><span style={{fontWeight: 500}}>Quick Filter</span>: Perform Quick Grid Wide
Filtering
with
the Quick Filter</p>
<p><span style={{fontWeight: 500}}>DOB Filter</span>: Set the DOB filter to 01/01/2000
using
the
Filter API (expand the Employee column to show the DOB column)</p>
<p><span style={{fontWeight: 500}}>Custom Headers</span>: Sort, Filter and Render
Headers
using
Header Components</p>
</div>
</div>
<div className="row">
<div className="col-sm-4">
<div className="card">
<div className="card-body">
<h4 className="card-title">Grid & Column API</h4>
<p className="card-text">Utilise Grid Features Programmatically Using the APIs
Available</p>
<a target="_blank" href="https://www.ag-grid.com/javascript-grid-api/"
className="btn btn-primary">Grid API</a>
<a target="_blank" href="https://www.ag-grid.com//javascript-grid-column-api/"
className="btn btn-primary">Column API</a>
</div>
</div>
</div>
<div className="col-sm-4">
<div className="card">
<div className="card-body">
<h4 className="card-title">Header Components</h4>
<p className="card-text">Customer the Header with React Components</p>
<a target="_blank"
href="https://www.ag-grid.com//javascript-grid-header-rendering/#headerComponent"
className="btn btn-primary">Header Component</a>
<a target="_blank"
href="https://www.ag-grid.com//javascript-grid-header-rendering/#headerGroupComponent"
className="btn btn-primary">Header Group Component</a>
</div>
</div>
</div>
<div className="col-sm-4">
<div className="card">
<div className="card-body">
<h4 className="card-title">Filters</h4>
<p className="card-text">Filter with Quick Filters, Floating Filters, Built In
Filters
or Using the
Filter API</p>
<a target="_blank" href="https://www.ag-grid.com//javascript-grid-filter-quick/"
className="btn btn-primary">Quick
Filter</a>
<a target="_blank"
href="https://www.ag-grid.com//javascript-grid-floating-filter-component/"
className="btn btn-primary">Floating Filters</a>
<a target="_blank" href="https://www.ag-grid.com//javascript-grid-filtering/"
className="btn btn-primary">Built in
Filters</a>
<a target="_blank"
href="https://www.ag-grid.com//javascript-grid-filtering/#accessing-filter-component-instances"
className="btn btn-primary">Filter API</a>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-sm-4">
<div className="card">
<div className="card-body">
<h4 className="card-title">Tool Panel</h4>
<p className="card-text">Let your users Pivot, Group and Aggregate using the
Tool
Panel</p>
<a target="_blank" href="https://www.ag-grid.com//javascript-grid-tool-panel/"
className="btn btn-primary">Tool Panel</a>
</div>
</div>
</div>
<div className="col-sm-8">
<div className="card">
<div className="card-body">
<h4 className="card-title">The Rest</h4>
<p className="card-text">Pinned Columns, Checkbox Selection, Customer Renderers,
Data
Updates</p>
<a target="_blank"
href="https://www.ag-grid.com/best-react-data-grid/?framework=react"
className="btn btn-primary">React with ag-Grid</a>
<a target="_blank" href="https://www.ag-grid.com//javascript-grid-pinning/"
className="btn btn-primary">Pinned Column</a>
<a target="_blank"
href="https://www.ag-grid.com//javascript-grid-selection/#checkboxSelection"
className="btn btn-primary">Checkbox Selection</a>
<a target="_blank"
href="https://www.ag-grid.com//javascript-grid-cell-rendering/"
className="btn btn-primary">Cell
Renderers</a>
<a target="_blank" href="https://www.ag-grid.com/javascript-grid-data-update/"
className="btn btn-primary">Updating Data</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
// showing the bottom header and grid is optional, so we put in a switch
if (this.state.showGrid) {
bottomHeaderTemplate = (
<div>
<div style={{padding: 4}} className={'toolbar'}>
<span>
Grid API:
{/* use ref to access the api in selectAll */}
<button onClick={() => {
this.refs.myGrid.api.selectAll()
}}>Select All</button>
<button onClick={this.deselectAll.bind(this)}>Clear Selection</button>
</span>
<span style={{marginLeft: 20}}>
Column API:
<button onClick={this.setCountryVisible.bind(this, false)}>Hide Country Column</button>
<button onClick={this.setCountryVisible.bind(this, true)}>Show Country Column</button>
</span>
</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>
);
gridTemplate = (
<div style={{height: 400, width: 945}} className="ag-fresh">
<AgGridReact
ref="myGrid"
// gridOptions is optional - it's possible to provide
// all values as React props
gridOptions={this.gridOptions}
// listening for events
onGridReady={this.onGridReady}
onRowSelected={this.onRowSelected}
onCellClicked={this.onCellClicked}
// binding to simple properties
showToolPanel={this.state.showToolPanel}
quickFilterText={this.state.quickFilterText}
// binding to an object property
icons={this.state.icons}
// binding to array properties
columnDefs={this.state.columnDefs}
rowData={this.state.rowData}
// no binding, just providing hard coded strings for the properties
suppressRowClickSelection="true"
rowSelection="multiple"
enableColResize="true"
enableSorting="true"
enableFilter="true"
groupHeaders="true"
rowHeight="22"
/>
</div>
);
}
return <div style={{width: '950px'}}>
<div style={{padding: '4px'}}>
{topHeaderTemplate}
{bottomHeaderTemplate}
{gridTemplate}
</div>
</div>;
}
}

23
src/richGridExample/SkillsFilter.jsx
View File

@@ -45,7 +45,7 @@ export default class SkillsFilter extends React.Component {
var rowSkills = params.data.skills;
var passed = true;
RefData.IT_SKILLS.forEach( (skill) => {
RefData.IT_SKILLS.forEach((skill) => {
if (this.state[skill]) {
if (!rowSkills[skill]) {
passed = false;
@@ -56,6 +56,10 @@ export default class SkillsFilter extends React.Component {
return passed;
};
getModel() {
return ''
}
// called by agGrid
isFilterActive() {
var somethingSelected = this.state.android || this.state.css ||
@@ -68,7 +72,7 @@ export default class SkillsFilter extends React.Component {
var newModel = {};
newModel[skill] = newValue;
// set the state, and once it is done, then call filterChangedCallback
this.setState(newModel, this.props.filterChangedCallback );
this.setState(newModel, this.props.filterChangedCallback);
}
helloFromSkillsFilter() {
@@ -78,16 +82,17 @@ export default class SkillsFilter extends React.Component {
render() {
var skillsTemplates = [];
RefData.IT_SKILLS.forEach( (skill, index) => {
RefData.IT_SKILLS.forEach((skill, 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'}}>
<label key={skill}
style={{border: '1px solid lightgrey', margin: 4, padding: 4, display: 'inline-block'}}>
<span>
<div style={{textAlign: 'center'}}>{skillName}</div>
<div>
<input type="checkbox" onClick={this.onSkillChanged.bind(this, skill)}/>
<img src={'images/skills/'+skill+'.png'} width={30}/>
<img src={'images/skills/' + skill + '.png'} width={30}/>
</div>
</span>
</label>
@@ -98,7 +103,13 @@ export default class SkillsFilter extends React.Component {
return (
<div style={{width: 380}}>
<div style={{textAlign: 'center', background: 'lightgray', width: '100%', display: 'block', borderBottom: '1px solid grey'}}>
<div style={{
textAlign: 'center',
background: 'lightgray',
width: '100%',
display: 'block',
borderBottom: '1px solid grey'
}}>
<b>Custom Skills Filter</b>
</div>
{skillsTemplates}

2
src/simpleReduxDynamicComponentExample/GridComponent.jsx
View File

@@ -32,7 +32,7 @@ class GridComponent extends Component {
// row data will be provided via redux on this.props.rowData
render() {
return (
<div style={{height: 400, width: 945, marginTop: 15}}
<div style={{height: 400, width: 900, marginTop: 15}}
className="ag-fresh">
<AgGridReact
// properties

2
src/simpleReduxExample/GridComponent.jsx
View File

@@ -62,7 +62,7 @@ class GridComponent extends Component {
// this requires each row to have a uniquely identifying property - in this case the row data "symbol" (see getRowNodeId)
render() {
return (
<div style={{height: 400, width: 945, marginTop: 15}}
<div style={{height: 400, width: 900, marginTop: 15}}
className="ag-fresh">
<AgGridReact
// properties