Merge branch 'b23.0.0'
This commit is contained in:
Sean Landsman
@@ -1,5 +1,5 @@
|
||||
import React, {Component} from "react";
|
||||
import {AgGridColumn, AgGridReact} from "@ag-grid-community/react";
|
||||
import React, { Component } from "react";
|
||||
import { AgGridColumn, AgGridReact } from "@ag-grid-community/react";
|
||||
import RowDataFactory from "./RowDataFactory";
|
||||
import DateComponent from "./DateComponent.jsx";
|
||||
import SkillsCellRenderer from './SkillsCellRenderer.jsx';
|
||||
@@ -17,7 +17,7 @@ import "./RichGridDeclarativeExample.css";
|
||||
// import {AllCommunityModules} from "@ag-grid-community/all-modules";
|
||||
|
||||
// for enterprise features
|
||||
import {AllModules} from "@ag-grid-enterprise/all-modules";
|
||||
import { AllModules } from "@ag-grid-enterprise/all-modules";
|
||||
|
||||
export default class RichGridDeclarativeExample extends Component {
|
||||
constructor(props) {
|
||||
@@ -57,7 +57,7 @@ export default class RichGridDeclarativeExample extends Component {
|
||||
|
||||
/* Demo related methods */
|
||||
onToggleSidebar = (event) => {
|
||||
this.setState({sideBar: event.target.checked});
|
||||
this.setState({ sideBar: event.target.checked });
|
||||
};
|
||||
|
||||
deselectAll() {
|
||||
@@ -65,7 +65,7 @@ export default class RichGridDeclarativeExample extends Component {
|
||||
}
|
||||
|
||||
onQuickFilterText = (event) => {
|
||||
this.setState({quickFilterText: event.target.value});
|
||||
this.setState({ quickFilterText: event.target.value });
|
||||
};
|
||||
|
||||
onRefreshData = () => {
|
||||
@@ -128,58 +128,58 @@ export default class RichGridDeclarativeExample extends Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div style={{width: '900px'}}>
|
||||
<div style={{ width: '900px' }}>
|
||||
<h1>Rich Grid with Declarative Markup Example</h1>
|
||||
<div style={{display: "inline-block", width: "100%"}}>
|
||||
<div style={{float: "left"}}>
|
||||
<b>Employees Skills and Contact Details: </b>{ this.state.rowCount }
|
||||
<div style={{ display: "inline-block", width: "100%" }}>
|
||||
<div style={{ float: "left" }}>
|
||||
<b>Employees Skills and Contact Details: </b>{this.state.rowCount}
|
||||
</div>
|
||||
</div>
|
||||
<div style={{marginTop: 10}}>
|
||||
<div style={{ marginTop: 10 }}>
|
||||
<div>
|
||||
<span>
|
||||
Grid API:
|
||||
<button onClick={() => {
|
||||
this.api.selectAll()
|
||||
this.api.selectAll();
|
||||
}} className="btn btn-primary">Select All</button>
|
||||
<button onClick={() => {
|
||||
this.api.deselectAll()
|
||||
this.api.deselectAll();
|
||||
}} className="btn btn-primary">Clear Selection</button>
|
||||
</span>
|
||||
<span style={{float: "right"}}>
|
||||
<span style={{ float: "right" }}>
|
||||
Column API:
|
||||
<button onClick={() => {
|
||||
this.columnApi.setColumnVisible('country', false)
|
||||
this.columnApi.setColumnVisible('country', false);
|
||||
}} className="btn btn-primary">Hide Country Column</button>
|
||||
<button onClick={() => {
|
||||
this.columnApi.setColumnVisible('country', true)
|
||||
this.columnApi.setColumnVisible('country', 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"}}>
|
||||
<div style={{ display: "inline-block", width: "100%", marginTop: 10, marginBottom: 10 }}>
|
||||
<div style={{ float: "left" }}>
|
||||
<button onClick={this.onRefreshData} className="btn btn-primary">Refresh Data</button>
|
||||
</div>
|
||||
<div style={{float: "right"}}>
|
||||
<div style={{ float: "right" }}>
|
||||
Filter API:
|
||||
<button onClick={this.invokeSkillsFilterMethod}
|
||||
className="btn btn-primary">Invoke Skills Filter Method
|
||||
className="btn btn-primary">Invoke Skills Filter Method
|
||||
</button>
|
||||
<button onClick={this.dobFilter} className="btn btn-primary">DOB equals to 01/01/2000
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{display: "inline-block", width: "100%", marginTop: 10, marginBottom: 10}}>
|
||||
<div style={{float: "left"}}>
|
||||
<div style={{ display: "inline-block", width: "100%", marginTop: 10, marginBottom: 10 }}>
|
||||
<div style={{ float: "left" }}>
|
||||
<label htmlFor="sideBarToggle">Show Side Bar </label>
|
||||
<input type="checkbox" id="sideBarToggle" onChange={this.onToggleSidebar} style={{marginRight: 5}}/>
|
||||
<input type="checkbox" id="sideBarToggle" onChange={this.onToggleSidebar} style={{ marginRight: 5 }} />
|
||||
</div>
|
||||
<div style={{float: "right", marginLeft: 20}}>
|
||||
<div style={{ float: "right", marginLeft: 20 }}>
|
||||
<label htmlFor="quickFilter">Quick Filter: </label>
|
||||
<input type="text" id="quickFilter" onChange={this.onQuickFilterText} placeholder="Type text to filter..."/>
|
||||
<input type="text" id="quickFilter" onChange={this.onQuickFilterText} placeholder="Type text to filter..." />
|
||||
</div>
|
||||
</div>
|
||||
<div style={{height: 400, width: 900}} className="ag-theme-balham">
|
||||
<div style={{ height: 400, width: 900 }} className="ag-theme-balham">
|
||||
<AgGridReact
|
||||
// listening for events
|
||||
onGridReady={this.onGridReady}
|
||||
@@ -220,35 +220,35 @@ export default class RichGridDeclarativeExample extends Component {
|
||||
}
|
||||
}}>
|
||||
<AgGridColumn headerName="#" width={30}
|
||||
checkboxSelection sortable={false} suppressMenu filter={false} pinned>
|
||||
checkboxSelection sortable={false} suppressMenu filter={false} pinned>
|
||||
</AgGridColumn>
|
||||
<AgGridColumn headerName="Employee" headerGroupComponentFramework={HeaderGroupComponent}>
|
||||
<AgGridColumn field="name" width={150}
|
||||
cellEditorFramework={NameCellEditor}
|
||||
enableRowGroup enablePivot pinned editable/>
|
||||
cellEditorFramework={NameCellEditor}
|
||||
enableRowGroup enablePivot pinned editable />
|
||||
<AgGridColumn field="country" width={150}
|
||||
cellRenderer={RichGridDeclarativeExample.countryCellRenderer}
|
||||
filterParams={{
|
||||
cellRenderer: RichGridDeclarativeExample.countryCellRenderer,
|
||||
cellHeight: 20
|
||||
}}
|
||||
enableRowGroup enablePivot pinned editable/>
|
||||
cellRenderer={RichGridDeclarativeExample.countryCellRenderer}
|
||||
filterParams={{
|
||||
cellRenderer: RichGridDeclarativeExample.countryCellRenderer,
|
||||
cellHeight: 20
|
||||
}}
|
||||
enableRowGroup enablePivot pinned editable />
|
||||
<AgGridColumn field="dob" width={175} headerName="DOB" filter="agDateColumnFilter"
|
||||
pinned columnGroupShow="open"
|
||||
cellRenderer={RichGridDeclarativeExample.dateCellRenderer}/>
|
||||
pinned columnGroupShow="open"
|
||||
cellRenderer={RichGridDeclarativeExample.dateCellRenderer} />
|
||||
</AgGridColumn>
|
||||
<AgGridColumn headerName="IT Skills">
|
||||
<AgGridColumn field="skills" width={120} enableRowGroup enablePivot sortable={false}
|
||||
cellRendererFramework={SkillsCellRenderer}
|
||||
filterFramework={SkillsFilter}/>
|
||||
cellRendererFramework={SkillsCellRenderer}
|
||||
filterFramework={SkillsFilter} />
|
||||
<AgGridColumn field="proficiency" width={160} enableValue
|
||||
cellRendererFramework={ProficiencyCellRenderer}
|
||||
filterFramework={ProficiencyFilter}/>
|
||||
cellRendererFramework={ProficiencyCellRenderer}
|
||||
filterFramework={ProficiencyFilter} />
|
||||
</AgGridColumn>
|
||||
<AgGridColumn headerName="Contact">
|
||||
<AgGridColumn field="mobile" width={150} filter="text"/>
|
||||
<AgGridColumn field="landline" width={150} filter="text"/>
|
||||
<AgGridColumn field="address" width={500} filter="text"/>
|
||||
<AgGridColumn field="mobile" width={150} filter="text" />
|
||||
<AgGridColumn field="landline" width={150} filter="text" />
|
||||
<AgGridColumn field="address" width={500} filter="text" />
|
||||
</AgGridColumn>
|
||||
</AgGridReact>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user