Save and restore ejs-pivotview layout

[Meidika Wardana]

Hi,

I have a task to save and restore ejs-pivotview layout. I've been successfully save and restore the layout of ejs-grid, but I couldn't get what data I should save & restore for pivotview.

Here's the code I use for saving ejs-grid layout:

const gridObj = document.getElementById(this.gridId).ej2_instances[0]

const settings = {

columns: gridObj.columnModel,

filterSettings: gridObj.filterModule.filterSettings.properties,

groupSettings: gridObj.groupModule.groupSettings.properties

}

While the code for restoring ejs-grid layout:

const gridObj = document.getElementById(this.gridId).ej2_instances[0]

gridObj.columns = this.form.settings.columns

gridObj.filterSettings = this.form.settings.filterSettings

gridObj.groupSettings = this.form.settings.groupSettings

How I could "save and restore" the layout for ejs-pivotview? I want all necessary settings, and none of the dynamic data it could contain (i.e dataSource retrieved from DB).

Put it in another point of view, I want to make a CRUD of the dropdown I marked in this link below:

https://ibb.co/y5LTtR5

The goal is, I can create, edit, delete and show one of the layouts from a layout list.

Please help. Thanks

[AngelinFaithSheeba PaulvannanRajadurai]

Hi Meidika,

Please refer the below code example to save and load the Pivot Table component’s report settings.

Code Example:

methods: {

   save: function() {

      let pivotObj = JSON.parse((this.$refs.pivotview).ej2Instances.getPersistData()).dataSourceSettings;

      localStorage.saveData = JSON.stringify(pivotObj);

      console.log(localStorage.saveData);

    },

    load: function() {

      let pivotObj = JSON.parse((this.$refs.pivotview).ej2Instances.getPersistData());

      pivotObj.dataSourceSettings = JSON.parse(localStorage.saveData);

      console.log(pivotObj.dataSourceSettings);

    }

  }

Meanwhile, we have prepared a sample for your reference.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/pivot-1799302454

Please let us know if you have any concerns.

Regards,

Angelin Faith Sheeba.

[Meidika Wardana]

Hi, thanks for your reply. You lead me to the right direction, but I ended up using slightly modified code:


methods: {
  save: function() {
    const persistData = document.getElementById(this.gridId).ej2_instances[0].getPersistData()
    let pivotObj = JSON.parse(persistData).dataSourceSettings
    pivotObj = {
      ...pivotObj,
      dataSource: []
    }
    settings = {
      dataSourceSettings: pivotObj
    }
  },
  load: function() {
    const gridObj = document.getElementById(this.gridId).ej2_instances[0]
    const dataSource = document.getElementById(this.gridId).ej2_instances[0].dataSourceSettings.dataSource
    document.getElementById(this.gridId).ej2_instances[0].dataSourceSettings = this.form.settings.dataSourceSettings
    document.getElementById(this.gridId).ej2_instances[0].dataSourceSettings.dataSource = dataSource
    document.getElementById(this.gridId).ej2_instances[0].refresh()
  }
}

Now it seems the save and load functions work but there is a small problem. When I change the layout using my layout management dialog, then change the layout again by selecting one of the layouts in the pivotview toolbar dropdown, there will be an alert saying: "Do you want to save the changes to this report?", with Yes/No buttons. I want the alert to be removed and answered "No" by default. Please see this image for detail:

https://ibb.co/s5dFjsd

I also created a demo video so you can get clearer understanding:
https://drive.google.com/file/d/1wts-jO-1HZMrhUOH-akUH682MWtWHXUU/view?usp=sharing

For additional information, the layout dropdown in pivotview toolbar is populated using pivotview's built-in functions: fetchReport & loadReport. I hardcoded the reports like so:

fetchReport: function (args) {
  args.reportName = ['By Discipline', 'By Project', 'S&OP']
},
loadReport: function (args) {
  const pivotObj = document.getElementById('TspDemandPivotView').ej2_instances[0]
  switch (args.reportName) {
    case 'S&OP':
      pivotObj.dataSourceSettings = {
        dataSource: [...this.data],
        ...
      }
      break
    case 'By Project':
      pivotObj.dataSourceSettings = {
        dataSource: [...this.data],
        ...
      }
      break
    case 'By Discipline':
    default:
      pivotObj.dataSourceSettings = {
        dataSource: [...this.data],
      }
      break
  }
}

Please help... And thanks before

[AngelinFaithSheeba PaulvannanRajadurai]

Hi Meidika,

You can avoid the alert dialog by using isModified option in the "dataBound" event. Please see the code example below.

Code Example:

  dataBound: function() {

       let pivotObj = (this.$refs.pivotview).ej2Instances;

      pivotObj.isModified = false;

      pivotObj.toolbarModule.action ='';

    },

 

Meanwhile, we have prepared a sample for your reference. Please find it from below link.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/pivot-394712

Please let us know if you have any concerns.

Regards,

Angelin Faith Sheeba