When will be published Ract/client side rendering example?
Best regards,
dikan
React and StimulSoft
Re: React and StimulSoft
Hello dikan,
We have plans to create an example. This is in our to-do list.
Hope this will be released soon.
Thank you.
We have plans to create an example. This is in our to-do list.
Hope this will be released soon.
Thank you.
Re: React and StimulSoft
This is how I am doing it, using TypeScript and Material-UI.
I have 3 reports available to select, default report loads automatically.
I have 3 reports available to select, default report loads automatically.
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);
-
- Posts: 6245
- Joined: Tue Mar 20, 2018 5:34 am
Re: React and StimulSoft
Hello,
Thank you for the provided sample.
Thank you for the provided sample.