How to keep the “All Values” option in the number formatting dialog after applying formatting in the pivot table?

Introduction

By default, you can apply number formatting to all value fields at runtime by selecting the “All Values” option from the “Values” dropdown in the number formatting dialog. However, once the format has been applied, you might notice that the previously selected option does not persist in the “Values” dropdown when you reopen the number formatting dialog. This happens because the “All Values” option is not an actual field. As a result, the last bounded value field in the report setting is displayed in the “Values” dropdown. In this article, we will guide you through how to keep the “All Values” option in the number formatting dialog after applying the formatting.

Maintain “All Values” option in the number formatting dialog after applying the formatting

To achieve this, you need to use the numberFormatting event in your code. This event is triggered when closing the number formatting dialog upon clicking the OK button, and it allows you to sustain the “All Values” option after applying the formatting.

Note: In order to format the values at runtime using the formatting dialog, it is important to set the allowNumberFormatting property to true.

Below is the code snippet that you can use to maintain the “All Values” option in the number formatting dialog:

[index.js]

var pivotObj = new ej.pivotview.PivotView({
  allowNumberFormatting: true,
  numberFormatting: function (args) {
    // Check if the formatting is being applied to 'All Values'
    if (args.formatName == 'All Values') {
      // Maintain "All Values" option after applying the formatting
      pivotObj.numberFormattingModule.lastFormattedValue[0].name = 'All Values'; 
    }
  },
});

Here’s a breakdown of how the code works:

In this code sample, during the numberFormatting event, we verify whether formatName equals “All Values”. If this condition is satisfied, we utilize lastFormattedValue, which holds information about the previously formatted values. By setting the first element’s name property to “All Values”, we ensure that the “All Values” option is preserved in the number formatting dialog.

The following GIF images portray the difference between before and after retaining the “All Values” option from the values dropdown.

Before retaining

For a practical example of this code in action, you can refer to the following Sample in Stackblitz.

Conclusion:

I hope you enjoyed learning how to keep the “All Values” option in the number formatting dialog after applying formatting in the Pivot Table

You can also refer to our JavaScript 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!