React and StimulSoft
Posted: Wed Jan 17, 2018 5:42 pm
When will be published Ract/client side rendering example?
Best regards,
dikan
Best regards,
dikan
Reporting tool and data analytics tools for creating reports and dashboards in ASP.NET, ASP.NET MVC, .NET Core, Blazor, Angular, PHP, Python, WPF, JavaScript, and Java applications.
https://forum.stimulsoft.com/
Code: Select all
import React, {PureComponent} from 'react'
import {withStyles} from 'material-ui/styles';
import {StyleRulesCallback} from 'material-ui';
import Paper from 'material-ui/Paper';
import Menu, {MenuItem} from 'material-ui/Menu';
import Button from 'material-ui/Button';
const win:any = window;
let Stimulsoft: any;
class ReportViewerContainer extends PureComponent<any, any> {
private viewer: any;
constructor(props: any) {
super(props);
}
componentWillMount() {
Stimulsoft = win.Stimulsoft;
const CampusReport = new Stimulsoft.Report.StiReport(),
CampusReportNoDollars = new Stimulsoft.Report.StiReport(),
SummaryReport = new Stimulsoft.Report.StiReport();
CampusReport.loadFile('/reports/CampusSubCatRpt.mrt');
SummaryReport.loadFile('/reports/SubCatSumRpt.mrt');
CampusReportNoDollars.loadFile('/reports/CampusSubCatRptNoDollars.mrt');
this.setState({
summaryReport: SummaryReport,
campusReport: CampusReport,
currentReport: SummaryReport,
campusReportNoDollars: CampusReportNoDollars
})
}
componentDidMount() {
this.setupViewer();
}
setupViewer = () => {
const options = new Stimulsoft.Viewer.StiViewerOptions();
this.viewer = new Stimulsoft.Viewer.StiViewer(options, 'viewer', false);
this.viewer.report = this.state.currentReport;
this.viewer.renderHtml('viewer');
};
renderReport = () => {
this.viewer.report = this.state.currentReport;
};
selectReport = (prop: string) => {
return (e: any) => {
e.preventDefault();
if(this.state.currentReport === this.state[prop]){
return Promise.resolve().then(this.closeMenu);
}
return this.closeMenu()
.then(() => {
return new Promise((resolve) => {
this.setState({currentReport: this.state[prop]}, resolve)
})
})
.then(this.renderReport)
}
};
openMenu = (e: any) => {
this.setState({anchorEl: e.currentTarget})
};
closeMenu = () => {
return new Promise((resolve) => {
this.setState({anchorEl: undefined}, resolve)
})
};
render() {
const {anchorEl} = this.state,
selectCampusReport = this.selectReport('campusReport'),
selectSummaryReport = this.selectReport('summaryReport'),
selectCampusReportNoDollarsReport = this.selectReport('campusReportNoDollars');
return (
<Paper className={this.props.classes.root}>
<Button
variant="raised"
onClick={this.openMenu}
aria-owns={anchorEl ? 'report-menu' : undefined}
aria-haspopup="true"
>
Select Report
</Button>
<Menu
id="report-menu"
anchorEl={anchorEl}
open={Boolean(anchorEl)}
onClose={this.closeMenu}
>
<MenuItem
onClick={selectSummaryReport}
>
Summary Report
</MenuItem>
<MenuItem
onClick={selectCampusReport}
>
Campus Summary Report
</MenuItem>
<MenuItem
onClick={selectCampusReportNoDollarsReport}
>
Campus Summary Report (No Dollars)
</MenuItem>
</Menu>
<div id="viewer"> </div>
</Paper>
);
}
}
const styles: StyleRulesCallback<'root'> = (theme: any) => ({
root: theme.mixins.gutters({
margin: '1rem auto',
padding: '0.5rem 0.75rem',
maxWidth: '95vw'
})
});
export default withStyles(styles)(ReportViewerContainer);