1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Pivot toolbar click event / Listening to pivot change events...

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

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']

3 Replies
MM Manikandan Murugesan Syncfusion Team November 22, 2021 12:12 PM UTC

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. 

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 


TH Thierry November 22, 2021 02:05 PM UTC

Thanks 


MM Manikandan Murugesan Syncfusion Team November 23, 2021 08:53 AM UTC

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


Loader.
Up arrow icon