How to Rerendering the report when data source change in React Project?

Stimulsoft Reports.JS discussion
Post Reply
amamam
Posts: 4
Joined: Mon Oct 21, 2019 10:32 am

How to Rerendering the report when data source change in React Project?

Post by amamam »

Hi,
I want to fetch data in React Component and then regData for report.
in first regData it work but when change the source, report data dose not refresh.
How to rerender the report after change in dataSource?

I use this code after any change on sRequest that is my source :

Code: Select all

 
       const { sRequests } = this.props;
        var dsSRC = new window.Stimulsoft.System.Data.DataSet();
        dsSRC.readJson(sRequests);
        this.report.regData("SRC", null, dsSRC);
        
HighAley
Posts: 8431
Joined: Wed Jun 08, 2011 7:40 am
Location: Stimulsoft Office

Re: How to Rerendering the report when data source change in React Project?

Post by HighAley »

Hello.

Please, send us a sample by email with a link to this topic.

Thank you.
amamam
Posts: 4
Joined: Mon Oct 21, 2019 10:32 am

Re: How to Rerendering the report when data source change in React Project?

Post by amamam »

HighAley wrote: Tue Dec 17, 2019 2:53 pm Hello.

Please, send us a sample by email with a link to this topic.

Thank you.
Hello,
Please check this code that resolve the problem but i know that is not a proper way.
after that if the problem not found, i try to prepare sample.
Thank you.

Code: Select all

import React from 'react';
import { getSoftRequests } from '../../../actions/softRequests/softReqActions';
import { connect } from 'react-redux';
import PleaseWait from '../../Utils/PleaseWait'
import Alert from '../../../components/CustomComponent/MySnackbarContent'
import { MESSAGE_TYPE } from '../../../constants/modalType'
import SoftRequestFilters from '../SoftRequestFilter'
import getVisibleSoftRequests from '../../../selectors/softRequestSel'


class SoftRequestsRPT1 extends React.Component {
    constructor(props) {
        super(props);
    }
    //Actually i want to have a correct  version of this function
    setData = () => {
        let vC = document.getElementById("viewerContent")
        if (vC) {
            vC.innerHTML = "";
            this.report = new window.Stimulsoft.Report.StiReport()
            this.report.loadFile("reports/RequestRPT1.mrt");

            const { sRequests } = this.props;
            var dsSRC = new window.Stimulsoft.System.Data.DataSet();
            dsSRC.readJson(sRequests);

            this.report.regData("SRC", null, dsSRC);

            var options = new window.Stimulsoft.Viewer.StiViewerOptions();
            this.viewer = new window.Stimulsoft.Viewer.StiViewer(options, "StiViewer", false);
            this.viewer.report = this.report;

            this.viewer.renderHtml("viewerContent");
        }
    }

    componentDidMount() {
        this.props.getSoftRequests();//load data
    }

    render() {
        const { loading, error, message } = this.props;

        if (!error)
            return (
                <div>
                    <SoftRequestFilters />{/* Filter Component with button to refresh the loaded data,at here named 'sRequests' */}
                    <br />
                    {loading ? <PleaseWait /> : <div id="viewerContent"></div>}
                </div>
            )
        //error in load data
        else if (message && message.messageType && (message.messageType === MESSAGE_TYPE.SOFTREQUEST_FAILED)) {
            return (<Alert className=" mr-3" variant={'error'} message={error} />)
        }
        else {
            return <h1></h1>
        }
    }
    componentDidUpdate(prevProps) {
        //check if new data from user requested
        if (prevProps.loading === true && this.props.loading === false)
            this.setData()
    }
}
export default connect(
    state =>
        ({
            loading: state.softReq.loading,
            sRequests: getVisibleSoftRequests(state.softReq.items, state.softRequestStatus),
            error: state.softReq.error,
            message: state.messages,
        })
    ,
    dispatch =>
        ({
            getSoftRequests() {
                dispatch(getSoftRequests())
            }
        })
)(SoftRequestsRPT1)
Lech Kulikowski
Posts: 6269
Joined: Tue Mar 20, 2018 5:34 am

Re: How to Rerendering the report when data source change in React Project?

Post by Lech Kulikowski »

Hello,

Thank you fort he provided code.

Thank you.
Post Reply