Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
8fdb563a0e | ||
|
|
7a5e15c8cd | ||
|
|
bf18305c9a | ||
|
|
aef9c596b6 |
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "ag-grid-react-example",
|
"name": "ag-grid-react-example",
|
||||||
"version": "23.0.0",
|
"version": "23.0.2",
|
||||||
"description": "Example Reach applicaiton using ag-Grid.",
|
"description": "Example Reach applicaiton using ag-Grid.",
|
||||||
"main": "dist/ag-grid-react-example.js",
|
"main": "dist/ag-grid-react-example.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
|||||||
@@ -5,7 +5,7 @@
|
|||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<script type="text/javascript" src="../dist/react-examples.js" charset="utf-8"></script>
|
<script type="text/javascript" src="../dist/react-examples.js" charset="utf-8"></script>
|
||||||
<!-- Example uses font awesome icons -->
|
<!-- Example uses font awesome icons -->
|
||||||
<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet">
|
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
html, body {
|
html, body {
|
||||||
|
|||||||
@@ -31,10 +31,10 @@ export default class RichGridDeclarativeExample extends Component {
|
|||||||
icons: {
|
icons: {
|
||||||
columnRemoveFromGroup: '<i class="fa fa-times"/>',
|
columnRemoveFromGroup: '<i class="fa fa-times"/>',
|
||||||
filter: '<i class="fa fa-filter"/>',
|
filter: '<i class="fa fa-filter"/>',
|
||||||
sortAscending: '<i class="fa fa-long-arrow-alt-down"/>',
|
sortAscending: '<i class="fa fa-long-arrow-down"/>',
|
||||||
sortDescending: '<i class="fa fa-long-arrow-alt-up"/>',
|
sortDescending: '<i class="fa fa-long-arrow-up"/>',
|
||||||
groupExpanded: '<i class="far fa-minus-square"/>',
|
groupExpanded: '<i class="fa fa-minus-square-o"/>',
|
||||||
groupContracted: '<i class="far fa-plus-square"/>'
|
groupContracted: '<i class="fa fa-plus-square-o"/>'
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
@@ -75,13 +75,14 @@ export default class RichGridDeclarativeExample extends Component {
|
|||||||
};
|
};
|
||||||
|
|
||||||
invokeSkillsFilterMethod = () => {
|
invokeSkillsFilterMethod = () => {
|
||||||
let skillsFilter = this.api.getFilterInstance('skills');
|
this.api.getFilterInstance('skills', (instance) => {
|
||||||
let componentInstance = skillsFilter.getFrameworkComponentInstance();
|
let componentInstance = instance.getFrameworkComponentInstance();
|
||||||
componentInstance.helloFromSkillsFilter();
|
componentInstance.helloFromSkillsFilter();
|
||||||
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
dobFilter = () => {
|
dobFilter = () => {
|
||||||
let dateFilterComponent = this.api.getFilterInstance('dob');
|
this.api.getFilterInstance('dob', (dateFilterComponent) => {
|
||||||
dateFilterComponent.setModel({
|
dateFilterComponent.setModel({
|
||||||
type: 'equals',
|
type: 'equals',
|
||||||
dateFrom: '2000-01-01'
|
dateFrom: '2000-01-01'
|
||||||
@@ -93,6 +94,7 @@ export default class RichGridDeclarativeExample extends Component {
|
|||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.api.onFilterChanged();
|
this.api.onFilterChanged();
|
||||||
});
|
});
|
||||||
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
calculateRowCount = () => {
|
calculateRowCount = () => {
|
||||||
@@ -219,7 +221,7 @@ export default class RichGridDeclarativeExample extends Component {
|
|||||||
menuIcon: 'fa-bars'
|
menuIcon: 'fa-bars'
|
||||||
}
|
}
|
||||||
}}>
|
}}>
|
||||||
<AgGridColumn headerName="#" width={30}
|
<AgGridColumn headerName="#" width={40}
|
||||||
checkboxSelection sortable={false} suppressMenu filter={false} pinned>
|
checkboxSelection sortable={false} suppressMenu filter={false} pinned>
|
||||||
</AgGridColumn>
|
</AgGridColumn>
|
||||||
<AgGridColumn headerName="Employee" headerGroupComponentFramework={HeaderGroupComponent}>
|
<AgGridColumn headerName="Employee" headerGroupComponentFramework={HeaderGroupComponent}>
|
||||||
|
|||||||
@@ -30,10 +30,10 @@ export default class SortableHeaderComponent extends React.Component {
|
|||||||
|
|
||||||
sortElements.push(<div key={`up${this.props.displayName}`} className={downArrowClass}
|
sortElements.push(<div key={`up${this.props.displayName}`} className={downArrowClass}
|
||||||
onClick={this.onSortRequested.bind(this, 'desc')}><i
|
onClick={this.onSortRequested.bind(this, 'desc')}><i
|
||||||
className="fa fa-long-arrow-alt-down"/></div>);
|
className="fa fa-long-arrow-down"/></div>);
|
||||||
sortElements.push(<div key={`down${this.props.displayName}`} className={upArrowClass}
|
sortElements.push(<div key={`down${this.props.displayName}`} className={upArrowClass}
|
||||||
onClick={this.onSortRequested.bind(this, 'asc')}><i
|
onClick={this.onSortRequested.bind(this, 'asc')}><i
|
||||||
className="fa fa-long-arrow-alt-up"/></div>);
|
className="fa fa-long-arrow-up"/></div>);
|
||||||
sortElements.push(<div key={`minus${this.props.displayName}`} className={removeArrowClass}
|
sortElements.push(<div key={`minus${this.props.displayName}`} className={removeArrowClass}
|
||||||
onClick={this.onSortRequested.bind(this, '')}><i
|
onClick={this.onSortRequested.bind(this, '')}><i
|
||||||
className="fa fa-times"/></div>)
|
className="fa fa-times"/></div>)
|
||||||
|
|||||||
Reference in New Issue
Block a user