Transition from one displayOption to another breaks UI

[Jumpei Yamauchi]

We have custom report solutions that load different dataSourceSettings for each report in Pivotview component.

The solution works well when displayOption set to the same configurations for each report (e.g., { view: "Both"}). However, we observed that if we transition from a report to another with different displayOption (e.g., { view: "Table"} to { view: "Both"}), it breaks the UI for some reasons.

The following is the console error when this happens: 

What would be causing the UI to break?

Ideally, we'd like to load each report with different displayOption. 

[AngelinFaithSheeba PaulvannanRajadurai]

Hi Jumpei,

We are analyzing your query at our end, and we will update the details by tomorrow (August 10, 2023).

Regards,

Angelin Faith Sheeba.

[AngelinFaithSheeba PaulvannanRajadurai]

Hi Jumpei,

We have checked the reported issue and we unable to reproduce the reported script error at our end. However, currently we are facing an issue while saving the report with different views (table and chart). Thus, we have considered this issue as a bug "Pivot Table not display with desired display view options from the loaded report while using toolbar". And the fix for this issue will be included in our September first weekly release which is scheduled to be rolled out on Sep 5, 2023. You can track the status with the feedback link below.

Feedback: https://www.syncfusion.com/feedback/46044/pivot-table-not-display-with-desired-display-view-options-from-the-loaded-report

Until then, please use the workaround solution to save the report along with the "currentView" and "chartType", then assign the saved current view to the pivot table while loading the report. Please see the example code below.

Code Example:

function saveReport(args) {

        // save the report with its current view.

        view.currentView = pivotObj ? pivotObj.currentView : 'Table';

        view.chartType = pivotObj ? pivotObj.chartSettings.chartSeries.type : 'Column';

        args.report = JSON.stringify(view);

        }

    }

    function loadReport(args) {

        if (args.report) {

            let report = JSON.parse(args.report)

            pivotObj.dataSourceSettings = report.dataSourceSettings;

            // Assign the current view to the pivot table while loading the report.

            pivotObj.currentView = report.currentView;

            pivotObj.chartSettings.chartSeries.type = report.chartType

        }

    }

Output screenshot:

Report save and load as Table:

Report save and load as Chart:

Meanwhile, we have prepared a sample for your reference.

Sample: https://stackblitz.com/edit/react-lvoz5y-2czcjx?file=index.html,index.js

Regards,

Angelin Faith Sheeba.

[AngelinFaithSheeba PaulvannanRajadurai]

Hi Jumpei,

We are glad to announce that our weekly Release V22.2.12 is rolled out and the fix for the reported issue ”Pivot Table not display with desired display view options from the loaded report while using toolbar” has been included in this release. And please refer the below code example to load the report in loadReport event.

Code Example:

function loadReport(args) {

        let reportCollection = [];

        if (localStorage.pivotviewReports && localStorage.pivotviewReports !== "") {

            reportCollection = JSON.parse(localStorage.pivotviewReports);

        }

        reportCollection.map(function (item) {

            if (args.reportName === item.reportName) {

                args.report = item.report;

            }

        });

        if (args.report) {

            // Use the below code to load the report settings along with the desired type.

            pivotObj.loadPersistData(args.report);

        }

    }

Meanwhile, we have prepared a sample for your reference.

Sample: https://stackblitz.com/edit/react-efyrhy-s8gtmu?file=index.js

Please let us know if you have any concerns.

Regards,

Angelin Faith Sheeba

[Jumpei Yamauchi]

Thank you for the update and fixes, Angelin.

One thing we observed - when displayOption is set to { view: "Both" } (or with primary property as well) and toolbar is not visible, both table and chart reports show. 

showToolbar={false}

displayOption={{ view: 'Both', primary: 'Table' }}

Is this expected behavior? We have a requirement to disallow editing of certain reports and are thinking to achieve this by hiding toolbar and fieldlist control. 

[AngelinFaithSheeba PaulvannanRajadurai]

Hi Jumpei,

Please find the response below.

Query	Comments
Thank you for the update and fixes, Angelin. One thing we observed - when displayOption is set to { view: "Both" } (or with primary property as well) and toolbar is not visible, both table and chart reports show.  showToolbar={false} displayOption={{ view: 'Both', primary: 'Table' }}     Is this expected behavior?	Yes, both the pivot table and the pivot chart will display in the browser page corresponding to the current report settings, when the view property is set to "Both" in the displayOption, and the toolbar is disabled. This is the default behavior of our pivot table.
We have a requirement to disallow editing of certain reports and are thinking to achieve this by hiding toolbar and fieldlist control.	You can use any of the solutions listed below to meet your needs if you don't want to edit a saved report.   Solution 1: You can remove the save, save us, rename and field list options from the toolbar UI. Please refer the below code example.   Code example:  let toolbarOptions = ['Load', 'Grid', 'Chart', 'Export', 'SubTotal', 'GrandTotal', 'Formatting'];   Output screenshot:   Meanwhile, we have prepared a sample for your reference.   Sample: https://stackblitz.com/edit/react-4iufwb-kubxhm?file=index.js   Solution 2: You can disable the toolbar items with itemModel[] as per your requirement. Please refer the below code example.   Code example: function disable() {         // Using the index of the items you can disable the items here.         pivotObj.toolbarModule.toolbar.enableItems(1, false);         pivotObj.toolbarModule.toolbar.enableItems(2, false);         pivotObj.toolbarModule.toolbar.enableItems(3, false);         pivotObj.toolbarModule.toolbar.enableItems(4, false);         pivotObj.toolbarModule.toolbar.enableItems(14, false);                              //(OR)         // // Using the item element you can disable the items here.         // var item = document.getElementById("PivotViewsaveas");         // pivotObj.toolbarModule.toolbar.enableItems(item, false);     };   Output screenshot: Meanwhile, we have prepared a sample for your reference.   Sample: https://stackblitz.com/edit/react-4x5mzy-46n1c3?file=index.js

Please let us know if you have any concerns.

Regards,

Angelin Faith Sheeba.

[Jumpei Yamauchi]

Thank you for your answer, Angelin. Let us try disabling the toolbar items.

One other thing we noticed - when calling loadPersistData function, in some instances especially when transitioning from Chart to Table report, the loading spinner never stops and the control freezes.

I was not able to reproduce this behavior in your sample, so I believe this is in our configuration or code logic.

We are building our custom report builder (not using the ones in toolbar since we'd also like to allow users to create report in DataGrid control as well, which I do not believe have report builder capability?)

We have a functional component that hosts the Pivot view control, and it is re-rendered whenever a report is selected from our custom dropdown that has a list of reports. In the useEffect of the component we call loadPersistData function. (useEffect is only called on selected props changes including the dropdown value change)

What could be causing the spinner to be stuck?

[AngelinFaithSheeba PaulvannanRajadurai]

Hi Jumpei,

We have checked the reported issue by loading the saved report using external dropdown list and we are unable to reproduce the reported issue at our end. In the below sample, we have saved the report using the toolbar UI and load the saved report using the external drop down list.

Sample: https://stackblitz.com/edit/react-efyrhy-nsu3gj?file=index.js

However, If the problem persists, please reproduce it in the provided sample and revert to us (or) send your runnable sample with the controller that reproduces the reported problem. This would allow us to investigate the reported problem at our end and provide a solution as soon as possible.

Regards,

Angelin Faith Sheeba.