How to hide the sorting icon for a specific date grouping field in the grouping bar of a JavaScript Pivot Table?

Introduction

In JavaScript Pivot Table, you can group the date field into different sections, such as years, quarters, months, and days. Each section appears as a button on the grouping bar. Each button typically includes icons for sorting, filtering, and a cancel option. However, there might be scenarios in which you want to selectively hide the sort icon for specific date grouping fields, such as the months field. This approach can enhance the user experience by customizing the user interface according to specific requirements. This article explains how to selectively hide the sort icon for a specific date grouping field in the JavaScript Pivot Table grouping bar.

Hiding the sorting icon for a specific date grouping field

To achieve the desired customization, you will need to use the enginePopulated event of the pivot table. This event is triggered after the pivot engine has been populated, allowing you to customize UI elements such as sort icons for the specific date grouping field. Below is an example of a code snippet that demonstrates how to achieve this:

[index.js]

var pivotObj = new ej.pivotview.PivotView({
  dataSourceSettings: {
    enableSorting: true,
    rows: [{ name: 'Date', caption: 'Date' }],
    groupSettings: [
      {
        name: 'Date',
        type: 'Date',
        groupInterval: ['Years', 'Months', 'Days'],
      },
    ]
  },
  showGroupingBar: true,
  enginePopulated: function (args) {
    // Iterate through all rows in the data source settings
    for(var i=0; i<pivotObj.dataSourceSettings.rows.length; i++){
        // Check if the current row is the 'months' grouping of the date field
        if (pivotObj.dataSourceSettings.rows[i].name == 'Date_date_group_months') {
            // Disables the sort icon for this specific field
            pivotObj.dataSourceSettings.rows[i].showSortIcon = false;
        }
    }
  },
});

In the code example above, within the enginePopulated event, we iterate through each row field defined in the dataSourceSettings. During the iteration, we check if the current row corresponds to the grouping of months by utilizing the pivotObj.dataSourceSettings.rows[i].name property. Each date grouping follows a specific naming convention: ‘Base field name + _ + “date_group” + _ + group type’. For instance, if there is a date field named ‘Date’ and it is grouped by months, the field name would be ‘Date_date_group_months’. This naming convention helps us easily identify specific fields that are grouped by month. If the field name matches, we set the showSortIcon property for that field to false, which effectively conceals the sorting icon for the month grouping field.

The following screenshots portray the difference between before and after implementing the above workaround solution:

Screenshots

Before implementing the workaround solution,

After implementing the workaround solution,

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

Additional resources:

To hide the sort icon on non-date grouping fields, refer to the UG documentation.

Conclusion

By following the steps outlined in this article and using the provided code example, you can easily hide the sorting icon for a specific date grouping field in the grouping bar of a JavaScript 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!