How to dynamically clear the value sorting in an Angular Pivot Table?

Introduction

When working with pivot tables, you can dynamically sort a specific value field and its aggregated values on either the row or column axis in both ascending and descending order. It can be enabled by setting the enableValueSorting property in the Angular Pivot Table to true. By default, the sorting order will be from descending to ascending. When you first click a value field header, it sorts the values in descending order. Clicking the same value field header again will sort the values in ascending order. However, in certain scenarios, you may want to clear the sorting by clicking a third time on the same value field header. There isn’t a direct option to accomplish this within the pivot table. Although this can be achieved through a workaround technique using the cellClick event. In this article, we will guide you through the process with a code example.

Using the cellClick event to clear sorting

To clear the value sorting after the third click on a specific value field header in a pivot table, you need to use the cellClick event. This event is triggered when clicking a cell in the pivot table, allowing you to clear the current sort order.

[app.component.html]

<ejs-pivotview #pivotview id="PivotView" enableValueSorting='true' (cellClick)="cellClick($event)">
</ejs-pivotview>

[app.component.ts]

import { PivotView } from '@syncfusion/ej2-pivotview';

export class AppComponent {
    public pivotObj: PivotView;

    @ViewChild('pivotview')
    public pivotObj: PivotView;

    // Define the cellClick event handler
    cellClick(args) {
        // Here we clear the sorting after the "Ascending" order is applied, However, you can modify this condition according to your specific need.
        if (args.currentCell.classList.contains('e-valuesheader') && this.pivotObj.dataSourceSettings.valueSortSettings.sortOrder === 'Ascending') {
            this.pivotObj.setProperties(
                {
                    dataSourceSettings: { 
                        // Here we reset the sorting
                        valueSortSettings: { sortOrder: 'None', headerText: '' },
                    },
                },
                true
            );
            // Refreshing the data to reflect the changes on the UI.
            this.pivotObj.refreshData();
        }
    }  

In the above code example, within the cellClick event method, we verify whether the clicked cell is a value field header by targeting the built-in class name (i.e., e-valuesheader ). Subsequently, we check the sort order of the value field, which is “Ascending”. If it is, we utilize the setProperties method, which allows us to set multiple properties simultaneously. With this method, we reset the sorting by setting the value of the sortOrder property to “None” and the headerText property to an empty string. The second parameter of setProperties is set to true to ensure the changes. Finally, we call the refreshData method to update the pivot table with the cleared sort settings. By implementing this code in your project, you can clear value sorting by clicking a specific value field header in a pivot table for the third time.

Things to remember

In the above workaround technique, we clear the value header sorting after the “Ascending” order is applied. While sorting, the sort order cycle will be as follows: descending, ascending, and then none. However, if you want to clear the sorting after the “Descending” order, simply change the above ‘If’ condition within the cellClick event to check for the “Descending” order, like this: this.pivotObj.dataSourceSettings.valueSortSettings.sortOrder === 'Descending'. This will effectively remove the sorting after the “Descending” order has been applied.

The following GIF image, which portrays the results of the above-mentioned snippets,

GIF

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

Conclusion

I hope you enjoyed learning how to dynamically clear the value sorting in an Angular Pivot Table.

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