Pivot toolbar click event / Listening to pivot change events...

Question

Hi all,We create a pivot table with a toolbar. The toolbar has selected built-in icons ['Grid','Chart','Export', 'SubTotal', 'GrandTotal', 'ConditionalFormatting','FieldList'] AND we added 3 extra custom icons as per the code below.We are noticing that the click event for the custom icon works perfectly with the click function of the toolbarRender property BUT we cannot seem to get the click event to work for the other icons. We tried to set the toolbarClick property to a function to no avail.Our ultimate goal is to save the state of the pivot whenever the user makes a change to it. We cannot use enablePersistence
, getPersistData() and loadPersistData(pivotLayout). We are writing our own persist logic.Any suggestions is appreciated.Thanks in advance.    toolbarClick: function (args) { console.log( args ); console.log( this );},
    toolbarRender: function (args) {
        args.customToolbar.splice(0, 0, {
                prefixIcon: 'e-pivotview-group', 
                tooltipText: 'Expand/Collapse',
                id: 'expandCollapse',
                click: this.toolbarClicked.bind(this),
        });
        args.customToolbar.splice(1, 0, {
        prefixIcon: 'e-pivotview-collapse', 
            tooltipText: 'Show/Hide GroupBar',
            id: 'showHideGroupBar',
            click: this.toolbarClicked.bind(this),
        });
        args.customToolbar.splice(2, 0, {
    type: 'Separator' 
        });
        args.customToolbar.splice(3, 0, {
            prefixIcon: 'e-pivot-format-toolbar', 
            tooltipText: 'Calculated Fields',
            id: 'calculatedFields',
            click: this.toolbarClicked.bind(this),
        });
        args.customToolbar.splice(4, 0, {
    type: 'Separator' 
        });
    },
    toolbarClicked: function(args) {
        console.log( args );
        var id = args.item.properties.id;
        switch ( id )
        {
        case 'expandCollapse':
            
            this.dataSourceSettings.expandAll = !this.dataSourceSettings.expandAll;
            
            if( this.dataSourceSettings.expandAll )
            {
            args.item.prefixIcon = "e-pivotview-ungroup";
            args.originalEvent.srcElement.className = 'e-btn-icon e-pivotview-ungroup e-icons';
            }
            else
            {
            args.item.prefixIcon = "e-pivotview-group";
            args.originalEvent.srcElement.className = 'e-btn-icon e-pivotview-group e-icons';
            }
            break;
        case 'calculatedFields':
            this.calculatedFieldModule.createCalculatedFieldDialog( );
            break;
        case 'showHideGroupBar':
           
            if ( this.properties.showGroupingBar )
            {
            this.properties.showGroupingBar = false;
            }
            else
            {
            this.properties.showGroupingBar = true;
            }
            
            this.refresh();
            
            if(  this.properties.showGroupingBar )
            {
            args.item.prefixIcon = "e-pivotview-collapse";
            this.element.querySelector("#showHideGroupBar").firstChild.className = 'e-btn-icon e-pivotview-collapse e-icons';
            }
            else
            {
            args.item.prefixIcon = "e-pivotview-expand";
            this.element.querySelector("#showHideGroupBar").firstChild.className = 'e-btn-icon e-pivotview-expand e-icons';
            }
            break;
        }
    },
    toolbar: ['Grid','Chart','Export', 'SubTotal', 'GrandTotal', 'ConditionalFormatting','FieldList']

Manikandan Murugesan · Answer

Hi Thierry, 
 
When the pivot table is updated, you can get the current report by using the "getPersistData" method in the "dataBound" event without enabling the "enablePersisitence" option. For more information, please refer the code example below. 
 
Code Example: 




  dataBound: function (args) { 
    if (pivotObj) { 
      localStorage.pivotViewReports = pivotObj.getPersistData(); 
    } 
  } 
 
Meanwhile, we have prepared a sample for your reference. Please find it from below link. 
Sample: https://stackblitz.com/edit/kppfad?file=index.js 

If this is different from your requirement, then please let us know the more details with screen shot/video (if possible), so that we can work towards fulfilling your requirement. 
 
Regards, 
Manikandan

Thierry · Answer

Thanks

Manikandan Murugesan · Answer

Hi Thierry, 
   
Please let us know if you have any other queries. We are always happy to assist you.  
   
Regards,  
Manikandan