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

AG-420 Improve React implementation

Browse Source
This commit is contained in:
Sean Landsman
2017-05-26 10:31:12 +01:00
parent 3226c0d6ba
commit e1871affe3
22 changed files with 1550 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/App.jsx
View File

@@ -1,5 +1,5 @@
import React, {Component} from "react";
import {Route, Switch, NavLink, Redirect} from "react-router-dom";
import {Redirect, Route, Switch} from "react-router-dom";
import NavItem from "./NavItem";
@@ -10,6 +10,8 @@ import FloatingRowComponentExample from "./floatingRowExample/FloatingRowCompone
import FullWidthComponentExample from "./fullWidthExample/FullWidthComponentExample";
import GroupedRowInnerRendererComponentExample from "./groupedRowInnerRendererExample/GroupedRowInnerRendererComponentExample";
import FilterComponentExample from "./filterComponentExample/FilterComponentExample";
import RichGridExample from "./richGridExample/RichGridExample";
import MasterDetailExample from "./masterDetailExample/MasterDetailExample";
const Header = () => (
<header>
@@ -23,10 +25,9 @@ const Header = () => (
<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='/grouped-data'>Grouped Data Example</NavItem>
</ul>
</header>
)
);
class App extends Component {
render() {
@@ -34,8 +35,8 @@ class App extends Component {
<div>
<Header/>
<Switch>
<Redirect from="/" exact to="/dynamic" />
{/*<Route exact path='/rich-dynamic' component={DynamicComponentsExample}/>*/}
<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}/>
@@ -43,8 +44,7 @@ class App extends Component {
<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={RichComponentsExample}/>*/}
{/*<Route exact path='/grouped-data' component={RichComponentsExample}/>*/}
<Route exact path='/master-detail' component={MasterDetailExample}/>
</Switch>
</div>
)

3
src/filterComponentExample/FilterComponentExample.jsx
View File

@@ -2,7 +2,8 @@ import React, {Component} from "react";
import {AgGridReact} from "ag-grid-react";
import "ag-grid-enterprise/main";
import "ag-grid-enterprise";
import PartialMatchFilter from "./PartialMatchFilter";
export default class FilterComponentExample extends Component {

5
src/fullWidthExample/FullWidthComponentExample.jsx
View File

@@ -11,10 +11,7 @@ export default class FullWidthComponentExample extends Component {
gridOptions: {},
rowData: this.createRowData(),
columnDefs: this.createColumnDefs(),
topFloatingRowData: [{row: "Top Row", number: "Top Number"}],
bottomFloatingRowData: [{row: "Bottom Row", number: "Bottom Number"}]
columnDefs: this.createColumnDefs()
};
this.onGridReady = this.onGridReady.bind(this);

3
src/groupedRowInnerRendererExample/GroupedRowInnerRendererComponentExample.css Normal file
View File

@@ -0,0 +1,3 @@
.ag-group-value .ag-react-container {
display: inline-block;
}

5
src/groupedRowInnerRendererExample/GroupedRowInnerRendererComponentExample.jsx
View File

@@ -1,10 +1,11 @@
import React, {Component} from "react";
import ReactDOM from "react-dom";
import {AgGridReact} from "ag-grid-react";
import MedalRenderer from "./MedalRenderer";
import "ag-grid-enterprise/main";
import "./GroupedRowInnerRendererComponentExample.css";
import "ag-grid-enterprise";
export default class GroupedRowInnerRendererComponentExample extends Component {
constructor(props) {

105
src/index.html
View File

@@ -4,14 +4,115 @@
<head>
<meta charset="utf-8">
<script type="text/javascript" src="dist/bundle.js" charset="utf-8"></script>
<!-- Example uses font awesome icons -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<style>
html, body {
height: 100%;
}
.ag-react-container {
display: inline-block;
button {
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>
</head>

38
src/masterDetailExample/DetailPanelComponent.css Normal file
View File

@@ -0,0 +1,38 @@
.ag-full-width-row .ag-react-container {
height: 100%
}
.full-width-panel {
position: relative;
background: #fafafa;
height: 100%;
width: 100%;
padding: 5px;
box-sizing: border-box;
border-left: 2px solid grey;
border-bottom: 2px solid lightgray;
border-right: 2px solid lightgray;
}
.call-record-cell {
text-align: right;
}
.full-width-detail {
padding-top: 4px;
}
.full-width-details {
float: left;
padding: 5px;
margin: 5px;
width: 150px;
}
.full-width-grid {
margin-left: 150px;
padding-top: 25px;
box-sizing: border-box;
display: block;
height: 100%;
}

81
src/masterDetailExample/DetailPanelComponent.jsx Normal file
View File

@@ -0,0 +1,81 @@
import React, {Component} from "react";
import {AgGridReact} from "ag-grid-react";
import "./DetailPanelComponent.css";
export default class DetailPanelComponent extends Component {
constructor(props) {
super(props);
this.state = {
columnDefs: this.createColumnDefs(),
parentRecord: this.props.node.parent.data,
img: `images/${this.props.node.parent.data.image}.png`
};
this.onGridReady = this.onGridReady.bind(this);
this.onSearchTextChange = this.onSearchTextChange.bind(this);
}
onGridReady(params) {
this.gridApi = params.api;
this.columnApi = params.columnApi;
this.gridApi.setRowData(this.state.parentRecord.callRecords);
setTimeout(() => {
this.gridApi.sizeColumnsToFit();
})
}
onSearchTextChange(newData) {
this.gridApi.setQuickFilter(newData);
}
createColumnDefs() {
return [
{headerName: 'Call ID', field: 'callId', cellClass: 'call-record-cell'},
{headerName: 'Direction', field: 'direction', cellClass: 'call-record-cell'},
{headerName: 'Number', field: 'number', cellClass: 'call-record-cell'},
{
headerName: 'Duration',
field: 'duration',
cellClass: 'call-record-cell',
cellFormatter: this.secondCellFormatter
},
{headerName: 'Switch', field: 'switchCode', cellClass: 'call-record-cell'}];
}
secondCellFormatter(params) {
return params.value.toLocaleString() + 's';
}
onButtonClick() {
window.alert('Sample button pressed!!');
}
render() {
return (
<div className="full-width-panel">
<div className="full-width-details">
<div className="full-width-detail"><img width="120px" src={this.state.img}/>
</div>
<div className="full-width-detail"><b>Name: </b> {this.state.parentRecord.name}</div>
<div className="full-width-detail"><b>Account: </b> {this.state.parentRecord.account}</div>
</div>
<AgGridReact
// properties
columnDefs={this.state.columnDefs}
enableSorting
enableFilter
enableColResize
// events
onGridReady={this.onGridReady}>
</AgGridReact>
</div>
);
}
}

152
src/masterDetailExample/MasterDetailExample.jsx Normal file
View File

@@ -0,0 +1,152 @@
import React, {Component} from "react";
import {AgGridReact} from "ag-grid-react";
import DetailPanelComponent from "./DetailPanelComponent";
export default class MasterDetailExample extends Component {
constructor(props) {
super(props);
this.state = {
rowData: this.createRowData(),
columnDefs: this.createColumnDefs(),
};
this.onGridReady = this.onGridReady.bind(this);
}
onGridReady(params) {
this.gridApi = params.api;
this.columnApi = params.columnApi;
this.gridApi.sizeColumnsToFit();
}
createColumnDefs() {
return [
{
headerName: 'Name', field: 'name',
// left column is going to act as group column, with the expand / contract controls
cellRenderer: 'group',
// we don't want the child count - it would be one each time anyway as each parent
// not has exactly one child node
cellRendererParams: {suppressCount: true}
},
{headerName: 'Account', field: 'account'},
{headerName: 'Calls', field: 'totalCalls'},
{headerName: 'Minutes', field: 'totalMinutes', cellFormatter: this.minuteCellFormatter}
];
}
createRowData() {
let rowData = [];
for (let i = 0; i < 20; i++) {
let firstName = this.firstnames[Math.floor(Math.random() * this.firstnames.length)];
let lastName = this.lastnames[Math.floor(Math.random() * this.lastnames.length)];
let image = this.images[i % this.images.length];
let totalDuration = 0;
let callRecords = [];
// call count is random number between 20 and 120
let callCount = Math.floor(Math.random() * 100) + 20;
for (let j = 0; j < callCount; j++) {
// duration is random number between 20 and 120
let callDuration = Math.floor(Math.random() * 100) + 20;
let callRecord = {
callId: this.callIdSequence++,
duration: callDuration,
switchCode: 'SW' + Math.floor(Math.random() * 10),
// 50% chance of in vs out
direction: (Math.random() > .5) ? 'In' : 'Out',
// made up number
number: '(0' + Math.floor(Math.random() * 10) + ') ' + Math.floor(Math.random() * 100000000)
};
callRecords.push(callRecord);
totalDuration += callDuration;
}
let record = {
name: firstName + ' ' + lastName,
account: i + 177000,
totalCalls: callCount,
image: image,
// convert from seconds to minutes
totalMinutes: totalDuration / 60,
callRecords: callRecords
};
rowData.push(record);
}
return rowData;
}
minuteCellFormatter(params) {
return params.value.toLocaleString() + 'm';
};
isFullWidthCell(rowNode) {
return rowNode.level === 1;
}
getRowHeight(params) {
let rowIsDetailRow = params.node.level === 1;
// return 100 when detail row, otherwise return 25
return rowIsDetailRow ? 200 : 25;
}
getNodeChildDetails(record) {
if (record.callRecords) {
return {
group: true,
// the key is used by the default group cellRenderer
key: record.name,
// provide ag-Grid with the children of this group
children: [record.callRecords],
// for demo, expand the third row by default
expanded: record.account === 177002
};
} else {
return null;
}
}
render() {
return (
<div style={{width: 800, height: 400}}
className="ag-fresh">
<h1>Master-Detail Example</h1>
<AgGridReact
// properties
columnDefs={this.state.columnDefs}
rowData={this.state.rowData}
isFullWidthCell={this.isFullWidthCell}
getRowHeight={this.getRowHeight}
getNodeChildDetails={this.getNodeChildDetails}
fullWidthCellRendererFramework={DetailPanelComponent}
enableSorting
enableColResize
suppressMenuFilterPanel
// events
onGridReady={this.onGridReady}>
</AgGridReact>
</div>
);
}
// a list of names we pick from when generating data
firstnames = ['Sophia', 'Emma', 'Olivia', 'Isabella', 'Mia', 'Ava', 'Lily', 'Zoe', 'Emily', 'Chloe', 'Layla', 'Madison', 'Madelyn', 'Abigail', 'Aubrey', 'Charlotte', 'Amelia', 'Ella', 'Kaylee', 'Avery', 'Aaliyah', 'Hailey', 'Hannah', 'Addison', 'Riley', 'Harper', 'Aria', 'Arianna', 'Mackenzie', 'Lila', 'Evelyn', 'Adalyn', 'Grace', 'Brooklyn', 'Ellie', 'Anna', 'Kaitlyn', 'Isabelle', 'Sophie', 'Scarlett', 'Natalie', 'Leah', 'Sarah', 'Nora', 'Mila', 'Elizabeth', 'Lillian', 'Kylie', 'Audrey', 'Lucy', 'Maya'];
lastnames = ['Smith', 'Jones', 'Williams', 'Taylor', 'Brown', 'Davies', 'Evans', 'Wilson', 'Thomas', 'Johnson'];
images = ['niall', 'sean', 'alberto', 'statue', 'horse'];
// each call gets a unique id, nothing to do with the grid, just help make the sample
// data more realistic
callIdSequence = 555;
};

90
src/richGridExample/ColDefFactory.jsx Normal file
View File

@@ -0,0 +1,90 @@
import SkillsCellRenderer from './SkillsCellRenderer.jsx';
import NameCellEditor from './NameCellEditor.jsx';
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 {
createColDefs() {
var columnDefs = [
{headerName: '#', width: 30, checkboxSelection: true, suppressSorting: true,
suppressMenu: true, pinned: true},
{
headerName: 'Employee',
headerGroupComponentFramework: MyReactHeaderGroupComponent,
children: [
{
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,
// an example of using a non-React cell renderer
cellRenderer: countryCellRenderer, pinned: true,
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'
}
]
},
{
headerName: 'IT Skills',
children: [
{headerName: "Skills", width: 125, suppressSorting: true, field: 'skills', enableRowGroup: true, enablePivot: true,
// supply a React component
cellRendererFramework: SkillsCellRenderer,
// supply a React component
filterFramework: SkillsFilter
},
{headerName: "Proficiency", field: "proficiency", width: 135, enableValue: true,
// supply a React component
cellRendererFramework: ProficiencyCellRenderer,
// supply a React component
filterFramework: ProficiencyFilter
}
]
},
{
headerName: 'Contact',
children: [
{headerName: "Mobile", field: "mobile", width: 150, filter: 'text'},
{headerName: "Land-line", field: "landline", width: 150, filter: 'text'},
{headerName: "Address", field: "address", width: 500, filter: 'text'}
]
}
];
return columnDefs;
}
}
// this is a simple cell renderer, putting together static html, no
// need to use React for it.
function countryCellRenderer(params) {
if (params.value) {
var flag = "<img border='0' width='15' height='10' " +
"style='margin-bottom: 2px' src='http://flags.fmcdn.net/data/flags/mini/"
+ RefData.COUNTRY_CODES[params.value] + ".png'>";
return flag + " " + params.value;
} else {
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;
}

167
src/richGridExample/MyReactDateComponent.jsx Normal file
View File

@@ -0,0 +1,167 @@
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
};

76
src/richGridExample/MyReactHeaderComponent.jsx Normal file
View File

@@ -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
};

41
src/richGridExample/MyReactHeaderGroupComponent.jsx Normal file
View File

@@ -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
};

117
src/richGridExample/NameCellEditor.jsx Normal file
View File

@@ -0,0 +1,117 @@
import React from 'react';
import RefData from './RefData';
var KEY_BACKSPACE = 8;
var KEY_DELETE = 46;
var KEY_F2 = 113;
// cell renderer for the proficiency column. this is a very basic cell editor,
export default class NameCellEditor extends React.Component {
constructor(props) {
super(props);
// the entire ag-Grid properties are passed as one single object inside the params
this.state = this.createInitialState(props);
}
// work out how to present the data based on what the user hit. you don't need to do any of
// this for your ag-Grid cellEditor to work, however it makes sense to do this so the user
// experience is similar to Excel
createInitialState(props) {
var startValue;
var putCursorAtEndOnFocus = false;
var highlightAllOnFocus = false;
if (props.keyPress === KEY_BACKSPACE || props.keyPress === KEY_DELETE) {
// if backspace or delete pressed, we clear the cell
startValue = '';
} else if (props.charPress) {
// if a letter was pressed, we start with the letter
startValue = props.charPress;
} else {
// otherwise we start with the current value
startValue = props.value;
if (props.keyPress === KEY_F2) {
this.putCursorAtEndOnFocus = true;
} else {
this.highlightAllOnFocus = true;
}
}
return {
value: startValue,
putCursorAtEndOnFocus: putCursorAtEndOnFocus,
highlightAllOnFocus: highlightAllOnFocus
}
}
render() {
return (
<input ref="textField" value={this.state.value} onChange={this.onChangeListener.bind(this)}/>
);
}
onChangeListener(event) {
// if doing React, you will probably be using a library for managing immutable
// objects better. to keep this example simple, we don't use one.
var newState = {
value: event.target.value,
putCursorAtEndOnFocus: this.state.putCursorAtEndOnFocus,
highlightAllOnFocus: this.state.highlightAllOnFocus
};
this.setState(newState);
}
// called by ag-Grid, to get the final value
getValue() {
return this.state.value;
}
// cannot use componentDidMount because although the component might be ready from React's point of
// view, it may not yet be in the browser (put in by ag-Grid) so focus will not work
afterGuiAttached() {
// get ref from React component
var eInput = this.refs.textField;
eInput.focus();
if (this.highlightAllOnFocus) {
eInput.select();
} else {
// when we started editing, we want the carot at the end, not the start.
// this comes into play in two scenarios: a) when user hits F2 and b)
// when user hits a printable character, then on IE (and only IE) the carot
// was placed after the first character, thus 'apply' would end up as 'pplea'
var length = eInput.value ? eInput.value.length : 0;
if (length > 0) {
eInput.setSelectionRange(length, length);
}
}
}
// if we want the editor to appear in a popup, then return true.
isPopup() {
return false;
}
// return true here if you don't want to allow editing on the cell.
isCancelBeforeStart() {
return false;
}
// just to demonstrate, if you type in 'cancel' then the edit will not take effect
isCancelAfterEnd() {
if (this.state.value && this.state.value.toUpperCase()==='CANCEL') {
return true;
} else {
return false;
}
}
}
// 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.
NameCellEditor.propTypes = {
params: React.PropTypes.object
};

25
src/richGridExample/ProficiencyCellRenderer.jsx Normal file
View File

@@ -0,0 +1,25 @@
import React from 'react';
import RefData from './RefData';
// cell renderer for the proficiency column. this is a very basic cell renderer,
// it is arguable that we should not of used React and just returned a string of
// html as a normal ag-Grid cellRenderer.
export default class ProficiencyCellRenderer extends React.Component {
render() {
var backgroundColor;
if (this.props.value < 20) {
backgroundColor = 'red';
} else if (this.props.value < 60) {
backgroundColor = '#ff9900';
} else {
backgroundColor = '#00A000';
}
return (
<div className="div-percent-bar" style={{ width: this.props.value + '%', backgroundColor: backgroundColor }}>
<div className="div-percent-value">{this.props.value}%</div>
</div>
);
}
}

73
src/richGridExample/ProficiencyFilter.jsx Normal file
View File

@@ -0,0 +1,73 @@
import React from 'react';
var PROFICIENCY_NAMES = ['No Filter', 'Above 40%', 'Above 60%', 'Above 80%'];
// the proficiency filter component. this demonstrates how to integrate
// a React filter component with ag-Grid.
export default class ProficiencyFilter extends React.Component {
constructor(props) {
super();
this.state = {
selected: PROFICIENCY_NAMES[0]
};
}
// called by agGrid
doesFilterPass(params) {
var value = this.props.valueGetter(params);
var valueAsNumber = parseFloat(value);
switch (this.state.selected) {
case PROFICIENCY_NAMES[1] : return valueAsNumber >= 40;
case PROFICIENCY_NAMES[2] : return valueAsNumber >= 60;
case PROFICIENCY_NAMES[3] : return valueAsNumber >= 80;
default : return true;
}
};
// called by agGrid
isFilterActive() {
return this.state.selected !== PROFICIENCY_NAMES[0];
};
onButtonPressed(name) {
console.log(name);
var newState = {selected: name};
// set the state, and once it is done, then call filterChangedCallback
this.setState(newState, this.props.filterChangedCallback);
console.log(name);
}
render() {
var rows = [];
PROFICIENCY_NAMES.forEach( (name)=> {
var selected = this.state.selected === name;
rows.push(
<div key={name}>
<label style={{paddingLeft: 4}}>
<input type="radio" checked={selected} name={Math.random()} onChange={this.onButtonPressed.bind(this, name)}/>
{name}
</label>
</div>
);
});
return (
<div>
<div style={{textAlign: 'center', background: 'lightgray', width: '100%', display: 'block', borderBottom: '1px solid grey'}}>
<b>Custom Proficiency Filter</b>
</div>
{rows}
</div>
);
}
// these are other method that agGrid calls that we
// could of implemented, but they are optional and
// we have no use for them in this particular filter.
//getApi() {}
//afterGuiAttached(params) {}
//onNewRowsLoaded() {}
//onAnyFilterChanged() {}
}

128
src/richGridExample/RefData.js Normal file
View File

@@ -0,0 +1,128 @@
export default class RefData {}
RefData.FIRST_NAMES = [
"Sophie", "Isabelle", "Emily", "Olivia", "Lily", "Chloe", "Isabella",
"Amelia", "Jessica", "Sophia", "Ava", "Charlotte", "Mia", "Lucy", "Grace", "Ruby",
"Ella", "Evie", "Freya", "Isla", "Poppy", "Daisy", "Layla"
];
RefData.LAST_NAMES = [
"Beckham", "Black", "Braxton", "Brennan", "Brock", "Bryson", "Cadwell",
"Cage", "Carson", "Chandler", "Cohen", "Cole", "Corbin", "Dallas", "Dalton", "Dane",
"Donovan", "Easton", "Fisher", "Fletcher", "Grady", "Greyson", "Griffin", "Gunner",
"Hayden", "Hudson", "Hunter", "Jacoby", "Jagger", "Jaxon", "Jett", "Kade", "Kane",
"Keating", "Keegan", "Kingston", "Kobe"
];
RefData.COUNTRY_CODES = {
Ireland: "ie",
Spain: "es",
"United Kingdom": "gb",
France: "fr",
Germany: "de",
Sweden: "se",
Italy: "it",
Greece: "gr",
Iceland: "is",
Portugal: "pt",
Malta: "mt",
Norway: "no",
Brazil: "br",
Argentina: "ar",
Colombia: "co",
Peru: "pe",
Venezuela: "ve",
Uruguay: "uy"
};
RefData.COUNTRIES = [
{country: "Ireland", continent: "Europe", language: "English"},
{country: "Spain", continent: "Europe", language: "Spanish"},
{country: "United Kingdom", continent: "Europe", language: "English"},
{country: "France", continent: "Europe", language: "French"},
{country: "Germany", continent: "Europe", language: "(other)"},
{country: "Sweden", continent: "Europe", language: "(other)"},
{country: "Norway", continent: "Europe", language: "(other)"},
{country: "Italy", continent: "Europe", language: "(other)"},
{country: "Greece", continent: "Europe", language: "(other)"},
{country: "Iceland", continent: "Europe", language: "(other)"},
{country: "Portugal", continent: "Europe", language: "Portuguese"},
{country: "Malta", continent: "Europe", language: "(other)"},
{country: "Brazil", continent: "South America", language: "Portuguese"},
{country: "Argentina", continent: "South America", language: "Spanish"},
{country: "Colombia", continent: "South America", language: "Spanish"},
{country: "Peru", continent: "South America", language: "Spanish"},
{country: "Venezuela", continent: "South America", language: "Spanish"},
{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',
'3235 High Forest, Glen Campbell, MS, 39035-6845, US, (601) 638-8186',
'2234 Sleepy Pony Mall , Drain, DC, 20078-4243, US, (202) 948-3634',
'2722 Hazy Turnabout, Burnt Cabins, NY, 14120-5642, US, (917) 604-6597',
'6686 Lazy Ledge, Two Rock, CA, 92639-3020, US, (619) 901-9911',
'2000 Dewy Limits, Wacahoota, NF, A4L-2V9, CA, (709) 065-3959',
'7710 Noble Pond Avenue, Bolivia, RI, 02931-1842, US, (401) 865-2160',
'3452 Sunny Vale, Pyro, ON, M8V-4Z0, CA, (519) 072-8609',
'4402 Dusty Cove, Many Farms, UT, 84853-8223, US, (435) 518-0673',
'5198 Silent Parade, Round Bottom, MD, 21542-9798, US, (301) 060-7245',
'8550 Shady Moor, Kitty Fork, CO, 80941-6207, US, (303) 502-3767',
'2131 Old Dell, Merry Midnight, AK, 99906-8842, US, (907) 369-2206',
'7390 Harvest Crest, Mosquito Crossing, RI, 02957-6116, US, (401) 463-6348',
'874 Little Point, Hot Coffee, BC, V3U-2P6, CA, (250) 706-9207',
'8834 Stony Pioneer Heights, Newlove, OR, 97419-8670, US, (541) 408-2213',
'9829 Grand Beach, Flint, UT, 84965-9900, US, (435) 700-5161',
'3799 Cozy Blossom Ramp, Ptarmigan, MS, 38715-0313, US, (769) 740-1526',
'3254 Silver Island Loop, Maunaloa, DE, 19869-3169, US, (302) 667-7671',
'1081 Middle Wood, Taylors Gut Landing, OR, 97266-2873, US, (541) 357-6310',
'1137 Umber Trail, Shacktown, NW, X3U-5Y8, CA, (867) 702-6883',
'9914 Hidden Bank, Wyoming, MO, 64635-9665, US, (636) 280-4192',
'7080 Misty Nectar Townline, Coward, AB, T9U-3N4, CA, (403) 623-2838',
'1184 Wishing Grounds, Vibank, NW, X7D-0V9, CA, (867) 531-2730',
'126 Easy Pointe, Grandview Beach, KY, 40928-9539, US, (502) 548-0956',
'6683 Colonial Street, Swan River, BC, V1A-9I8, CA, (778) 014-4257',
'960 Gentle Oak Lane, Shakopee, ND, 58618-6277, US, (701) 327-1219',
'6918 Cotton Pine Corner, Kenaston, IA, 52165-3975, US, (515) 906-7427',
'2368 Burning Woods, Ernfold, NY, 11879-9186, US, (646) 819-0355',
'5646 Quiet Shadow Chase, Tiger Tail, IA, 52283-5537, US, (712) 375-9225',
'5466 Foggy Mountain Dale, Sweet Home, MT, 59738-0251, US, (406) 881-1706',
'5313 Clear Willow Route, Amazon, BC, V0S-2S6, CA, (604) 340-7596',
'7000 Pleasant Autoroute, Spaceport City, UT, 84749-2448, US, (435) 154-3360',
'8359 Quaking Anchor Road, Gross, BC, V9O-0H5, CA, (250) 985-3859',
'5143 Amber Deer Hollow, New Deal, ND, 58446-0853, US, (701) 927-0322',
'6230 Jagged Bear Key, Young, AR, 72337-3811, US, (501) 805-7239',
'7207 Heather Vista, Devon, WY, 82520-1771, US, (307) 358-7092',
'9416 Red Rise Place, Spraytown, OK, 73809-4766, US, (580) 867-1973',
'3770 Golden Horse Diversion, Yelland, IL, 60471-1487, US, (224) 717-9349',
'4819 Honey Treasure Park, Alaska, NB, E1U-3I0, CA, (506) 656-9138',
'6187 Round Front, Land O Lakes, AK, 99873-6403, US, (907) 853-9063',
'9218 Crystal Highway, Pickelville, MT, 59847-9299, US, (406) 076-0024',
'6737 Bright Quay, Lazy Mountain, KY, 42390-4772, US, (606) 256-7288',
'237 Merry Campus, Twentysix, SC, 29330-4909, US, (864) 945-0157',
'446 Fallen Gate Rise, Petrolia, SC, 29959-9527, US, (864) 826-0553',
'2347 Indian Boulevard, Frisbee, VA, 23797-6458, US, (703) 656-8445',
'365 Emerald Grove Line, Level, NC, 28381-1514, US, (919) 976-7958',
'1207 Iron Extension, Klickitat, SC, 29197-8571, US, (803) 535-7888',
'6770 Cinder Glen, Caronport, OH, 45053-5002, US, (440) 369-4018',
'7619 Tawny Carrefour, Senlac, NV, 89529-9876, US, (775) 901-6433'];
RefData.IT_SKILLS = ['android', 'css', 'html5', 'mac', 'windows'];
RefData.IT_SKILLS_NAMES = ['Android', 'CSS', 'HTML 5', 'Mac', 'Windows'];

31
src/richGridExample/RichGridExample.css Normal file
View File

@@ -0,0 +1,31 @@
.ag-react-container {
display: block;
}
.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%;
}

226
src/richGridExample/RichGridExample.jsx Normal file
View File

@@ -0,0 +1,226 @@
import React, {Component} from "react";
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 "./RichGridExample.css";
// take this line out if you do not want to use ag-Grid-Enterprise
import "ag-grid-enterprise";
export default class RichGridExample extends Component {
constructor() {
super();
this.state = {
quickFilterText: null,
showGrid: true,
showToolPanel: false,
columnDefs: new ColDefFactory().createColDefs(),
rowData: new RowDataFactory().createRowData(),
icons: {
columnRemoveFromGroup: '<i class="fa fa-remove"/>',
filter: '<i class="fa fa-filter"/>',
sortAscending: '<i class="fa fa-long-arrow-down"/>',
sortDescending: '<i class="fa fa-long-arrow-up"/>',
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"/>'
}
};
// the grid options are optional, because you can provide every property
// to the grid via standard React properties. however, the react interface
// doesn't block you from using the standard JavaScript interface if you
// wish. Maybe you have the gridOptions stored as JSON on your server? If
// 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');
},
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
};
this.onGridReady = this.onGridReady.bind(this);
this.onRowSelected = this.onRowSelected.bind(this);
this.onCellClicked = this.onCellClicked.bind(this);
}
onShowGrid(show) {
this.setState({
showGrid: show
});
}
onToggleToolPanel(event) {
this.setState({showToolPanel: event.target.checked});
}
onGridReady(params) {
this.api = params.api;
this.columnApi = params.columnApi;
}
selectAll() {
this.api.selectAll();
}
deselectAll() {
this.api.deselectAll();
}
setCountryVisible(visible) {
this.columnApi.setColumnVisible('country', visible);
}
onQuickFilterText(event) {
this.setState({quickFilterText: event.target.value});
}
onCellClicked(event) {
console.log('onCellClicked: ' + event.data.name + ', col ' + event.colIndex);
}
onRowSelected(event) {
console.log('onRowSelected: ' + event.node.data.name);
}
onRefreshData() {
var newRowData = new RowDataFactory().createRowData();
this.setState({
rowData: newRowData
});
}
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;
var 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>
</div>
<div style={{padding: '4px'}}>
<b>Employees Skills and Contact Details</b> <span id="rowCount"/>
</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:
<button onClick={this.selectAll.bind(this)}>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}} 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}
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: '1024px'}}>
<div style={{padding: '4px'}}>
{topHeaderTemplate}
{bottomHeaderTemplate}
{gridTemplate}
</div>
</div>;
}
}

45
src/richGridExample/RowDataFactory.js Normal file
View File

@@ -0,0 +1,45 @@
import RefData from './RefData';
export default class RowDataFactory {
createRowData() {
var rowData = [];
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],
skills: {
android: Math.random() < 0.4,
html5: Math.random() < 0.4,
mac: Math.random() < 0.4,
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),
country: countryData.country,
continent: countryData.continent,
language: countryData.language,
mobile: this.createRandomPhoneNumber(),
landline: this.createRandomPhoneNumber()
});
}
return rowData;
}
createRandomPhoneNumber() {
var result = '+';
for (var i = 0; i < 12; i++) {
result += Math.round(Math.random() * 10);
if (i === 2 || i === 5 || i === 8) {
result += ' ';
}
}
return result;
}
}

26
src/richGridExample/SkillsCellRenderer.jsx Normal file
View File

@@ -0,0 +1,26 @@
import React from 'react';
import RefData from './RefData';
export default class SkillsCellRenderer extends React.Component {
render() {
var skills = [];
var rowData = this.props.data;
RefData.IT_SKILLS.forEach( (skill) => {
if (rowData && rowData.skills && rowData.skills[skill]) {
skills.push(<img key={skill} src={'images/skills/' + skill + '.png'} width={16} title={skill} />);
}
});
return <span>{skills}</span>;
}
}
// 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.
SkillsCellRenderer.propTypes = {
params: React.PropTypes.object
};

115
src/richGridExample/SkillsFilter.jsx Normal file
View File

@@ -0,0 +1,115 @@
import React from 'react';
import RefData from './RefData';
// the skills filter component. this can be laid out much better in a 'React'
// way. there are design patterns you can apply to layout out your React classes.
// however, i'm not worried, as the intention here is to show you ag-Grid
// working with React, and that's all. i'm not looking for any awards for my
// React design skills.
export default class SkillsFilter extends React.Component {
constructor(props) {
super(props);
this.state = {
android: false,
css: false,
html5: false,
mac: false,
windows: false
};
}
getModel() {
return {
android: this.state.android,
css: this.state.css,
html5: this.state.html5,
mac: this.state.mac,
windows: this.state.windows
}
}
setModel(model) {
this.setState({
android: model.android,
css: model.css,
html5: model.html5,
mac: model.mac,
windows: model.windows
});
}
// called by agGrid
doesFilterPass(params) {
var rowSkills = params.data.skills;
var passed = true;
RefData.IT_SKILLS.forEach( (skill) => {
if (this.state[skill]) {
if (!rowSkills[skill]) {
passed = false;
}
}
});
return passed;
};
// called by agGrid
isFilterActive() {
var somethingSelected = this.state.android || this.state.css ||
this.state.html5 || this.state.mac || this.state.windows;
return somethingSelected;
};
onSkillChanged(skill, event) {
var newValue = event.target.checked;
var newModel = {};
newModel[skill] = newValue;
// set the state, and once it is done, then call filterChangedCallback
this.setState(newModel, this.props.filterChangedCallback );
}
helloFromSkillsFilter() {
alert("Hello From The Skills Filter!");
}
render() {
var skillsTemplates = [];
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'}}>
<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}/>
</div>
</span>
</label>
);
skillsTemplates.push(template);
});
return (
<div style={{width: 380}}>
<div style={{textAlign: 'center', background: 'lightgray', width: '100%', display: 'block', borderBottom: '1px solid grey'}}>
<b>Custom Skills Filter</b>
</div>
{skillsTemplates}
</div>
);
}
// these are other method that agGrid calls that we
// could of implemented, but they are optional and
// we have no use for them in this particular filter.
//afterGuiAttached(params) {}
//onNewRowsLoaded() {}
//onAnyFilterChanged() {}
}