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

Introduction

In this article, we will guide you through the process with a code example. 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.

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 whenever a cell in the pivot table is clicked, allowing you to reset the current sort order.

Additionally, you may need to restrict value sorting when the sort order is set to None. You can achieve this by using the actionBegin event. Within this event, check whether the actionName in the args parameter is “Sort value”. If so, set the cancel property in the args parameter to true to prevent value sorting when the sort order is None.

[app.component.html]

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

[app.component.ts]

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

export class AppComponent {
    @ViewChild('pivotview')
    public pivotObj: PivotView;
    public isNoneOrder: boolean = false;

    updateValueSort(vSort: any): void {
        this.pivotObj.setProperties(
            {
                dataSourceSettings: {
                    // Here we reset the sorting
                    valueSortSettings: vSort
                }
            },
            true
        );
        // Refreshing the data to reflect the changes on the UI.
        this.pivotObj.refreshData();
        this.isNoneOrder = true;
    }
    
    // Define the cellClick event handler
    cellClick(args: any): void {
        this.isNoneOrder = false;
        if (args.currentCell.querySelector('.e-value-sort-icon') !== null) {
            const columnSortOrder: string = this.pivotObj.dataSourceSettings.valueSortSettings.columnSortOrder;
            const rowSortOrder: string = this.pivotObj.dataSourceSettings.valueSortSettings.rowSortOrder;
        
            // Value field in column axis
            if (this.pivotObj.dataSourceSettings.valueAxis === 'column') {
                if (args.currentCell.classList.contains('e-columnsheader') && columnSortOrder === 'Ascending') {
                    // Apply the 'None' order for the column header when value axis is 'column'
                    this.updateValueSort({ columnSortOrder: 'None', columnHeaderText: '' });
                } else if (args.currentCell.classList.contains('e-rowsheader') && rowSortOrder === 'Ascending') {
                    // Apply the 'None' order for the row header when value axis is 'column'
                    this.updateValueSort({ rowSortOrder: 'None', rowHeaderText: '' });
                }
                
            // Value field in row axis
            } else {
                if (args.currentCell.classList.contains('e-columnsheader') && rowSortOrder === 'Ascending') {
                    // Apply the 'None' order for the column header when value axis is 'row'
                    this.updateValueSort({ rowSortOrder: 'None', rowHeaderText: '' });
                } else if (args.currentCell.classList.contains('e-rowsheader') && columnSortOrder === 'Ascending') {
                    // Apply the 'None' order for the row header when value axis is 'row'
                    this.updateValueSort({ columnSortOrder: 'None', columnHeaderText: '' });
                }
            }
        }
    }
    
    // Define the actionBegin event handler
    actionBegin(args: any): void {
        if (args.actionName === 'Sort value' && this.isNoneOrder) {
            // Restrict the value sorting action when 'None' order is applied
            args.cancel = true;
        }
    } 
} 

In the above code example, within the cellClick event method, we check whether the clicked cell is a value field header by targeting the value‑sorting element using the built‑in class name (i.e., e-value-sort-icon). Next, we verify the value axis position—whether it is in the column or row axis. When the value field is in the column axis, we ensure that the clicked cell is a column header by checking whether the class name of the clicked cell is e-columnsheader. We also confirm that the column sort order of the value field is Ascending. If these conditions are met, we set the columnSortOrder property to “None” and the columnHeaderText property to an empty string.

Similarly, we must handle all four combinations:

• Column sorting with the value field in the column axis
• Row sorting with the value field in the column axis
• Column sorting with the value field in the row axis
• Row sorting with the value field in the row axis

We use the setProperties method, which allows setting multiple properties simultaneously to reset the value sorting. The second parameter of setProperties is set to true to ensure that the changes are applied. This logic is handled inside the updateValueSort method, and after updating the settings, we call the refreshData method to update the pivot table with the cleared sort configuration.

We restrict the value‑sorting process during the clearing operation by setting the cancel property in the args parameter to true within the actionBegin event. By using this approach in your project, you can successfully clear value sorting when clicking a specific value‑field header for the third time in a pivot table.

Things to remember

In the above workaround technique, we clear the value header sorting (i.e., columnSortOrder or rowSortOrder) 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.columnSortOrder === 'Descending'. This will effectively remove the sorting after the “Descending” order has been applied.

GIF

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

Refer to the working sample for additional details and implementation: sample of stackblitz.

Conclusion

We 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, BoldDesk Support, or feedback portal. We are always happy to assist you!