Required info about pivotview

[Ur Nuna]

Hi Team,

I have rendered pivotview component as a chid component and using pivotview component with toobar.

ex:<Parent>

<pivotwrapper>

<pivotViewComponent></pivotViewComponent>

</pivotwrapper>

</parent>

Q1)How can we access reference of the pivotViewComponent in parent component, And how can i get the report of the pivotview in parent component with that reference. So That I can save it in backend.

Q2)How can we load the reports in dropdown without calling fetch report, because we need to add a report to dropdown once we store the new report in the database instead of saving in a local storage.

Q3)How can i load the new data in a  pivot component from parent component.

Please check my question and do some helpful.

[Sivamathi Natarajan]

Hi Ur Nuna, 

 

Thanks for contacting Syncfusion support. 

 

Please find the response below, 

 

Query	Response
How can we access reference of the pivotViewComponent in parent component, And how can i get the report of the pivotview in parent component with that reference. So That I can save it in backend.	You can access the pivot table component from parent component using “ref”. Meanwhile we have prepared a sample for your reference. In the below sample pivot table component can be accessed by “this.pivotRef”.   render() {      return <div>       <PivotViewComponent id='PivotView' ref={(scope) => { this.pivotRef = scope; }} dataSourceSettings={dataSourceSettings} width={'100%'} height={'290'} gridSettings={{ columnWidth: 140 }}>        </PivotViewComponent>       </div>    }
How can we load the reports in dropdown without calling fetch report, because we need to add a report to dropdown once we store the new report in the database instead of saving in a local storage.	Based on your requirement we have prepared a sample to load the report from drop down list once report saved. You can save the current report using getPersistData() method. And you can load the report using loadPersistData() method.   save() {      var dataSource = this.pivotRef.getPersistData();      // Here we saved the reports in local varaible.      this.savedReport[this.textBoxObj.value] = dataSource;      // Here we have loaded the saved reports in drop down.      if (!this.loadReport)        this.loadReport.push({ 'value': this.textBoxObj.value, 'text': this.textBoxObj.value });      else        this.loadReport.push({ 'value': this.textBoxObj.value, 'text': this.textBoxObj.value });      this.textBoxObj.value = "";      this.dropdownObj.refresh();    }      load(args) {      // To load the report from drop down list      this.pivotRef.loadPersistData(this.savedReport[args.value]);    }     render() {      return <div>       <PivotViewComponent id='PivotView' ref={(scope) => { this.pivotRef = scope; }} dataSourceSettings={dataSourceSettings} width={'100%'} height={'290'} gridSettings={{ columnWidth: 140 }}>        </PivotViewComponent>         <br />        <div id='textBox'>          <div class="inner">            <table style={{ width: '100%' }}>              <tbody>                <tr style={{ height: '50px' }}>                  <td>                    <TextBoxComponent class='save' placeholder="Report Name" ref={(scope) => { this.textBoxObj = scope; }} cssClass="e-outline" floatLabelType="Auto" />                  </td>                  <td>                  <ButtonComponent class='save' cssClass='e-primary' onClick={this.save.bind(this)}>Save</ButtonComponent>                  </td>                </tr>              </tbody>            </table>          </div>          <DropDownListComponent placeholder={'Load Report'} floatLabelType={'Auto'} fields={this.fields} change={this.load.bind(this)} id="load-btn" index={0} enabled={true} dataSource={this.loadReport}            ref={(scope) => { this.dropdownObj = scope; }} />        </div>      </div>    }
How can i load the new data in a  pivot component from parent component.	You can load the new data source using pivot table component instance (this.pivotRef)

 

Sample Link: https://stackblitz.com/edit/react-sb2h8x-hq8nmj?file=index.js 

 

We hope the above sample meets your requirements. If not kindly share us more details along with screen-shots/video if possible. 

 

Regards, 

Sivamathi. 

[Ur Nuna]

Thanks for your prompt reply, We will check your reference and will get back you, if we get  any doubt on this.

[Sivamathi Natarajan]

Hi Ur Nuna, 

 

Thanks for the reply. We will wait until we hear from you. 

 

Regards, 

Sivamathi.