How to dynamically show or hide toolbar options in a Pivot Table based on condition?

This article explains how to dynamically show or hide toolbar options in the Pivot Table based on specific conditions.

Dynamically show or hide toolbar options in a Pivot Table based on a condition

When working with pivot table, you may want to customize the user interface by dynamically showing or hiding certain toolbar options (e.g., Remove and Load) based on specific conditions. This can be achieved by utilizing the actionBegin event in your code. This event is triggered before any action is performed on the pivot table. You can use this event to check the current action and show or hide toolbar options accordingly.

Here is a code example that demonstrates how to use the actionBegin event to show or hide certain toolbar options based on the pivot view displayOption.

[index.js]

var pivotObj = new ej.pivotview.PivotView({
  showToolbar: true,
  displayOption: { view: 'Both' },
  toolbar: ['New', 'Save', 'SaveAs', 'Rename', 'Remove', 'Load',
  'Grid', 'Chart', 'Export', 'SubTotal', 'GrandTotal', 'Formatting', 'FieldList'],
  actionBegin: function (args) {
    var toolbar = pivotObj.element.querySelector('.e-pivot-toolbar').ej2_instances[0];
    // Here, we check the action name 
    if (args.actionName === 'Show table view') {
      // Here we showed certain toolbar options for table view 
      toolbar.hideItem(4, false);
      toolbar.hideItem(5, false);
    } else if (args.actionName === 'Show chart view') {
      // Here we showed certain toolbar options for chart view
      toolbar.hideItem(4, true);
      toolbar.hideItem(5, true);
    }
  },
});

In the above code example, pivotObj refers to your pivot table instance. The hideItem method is used to show or hide toolbar options based on their position in the toolbar property. The first argument of hideItem is the index of the toolbar option (in this case, the index for the Remove option is 4 and for the Load option is 5), and the second argument is a Boolean value indicating whether to hide (i.e., true) or show (i.e., false) the option. Here, we have shown the remove and load toolbar options for the table view. When switching to the chart view through the UI action, we hide them from the toolbar. You can adapt the code to fit your specific requirements, such as showing or hiding different toolbar options.

The following screenshots, which portrays the results of the code snippet mentioned above,

Screenshots
Show the specified toolbar options for the table:

For a practical demonstration, refer to the sample of stackblitz.

Conclusion:
I hope you enjoyed learning how to dynamically show or hide toolbar options in the Pivot Table based on specific conditions.

You can also refer to our Pivot Table feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Pivot Table example to understand how to create and manipulate data.

For current customers, you can check out our components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!