How to highlight current view icon in Pivot Table toolbar items?

This article explains how to highlight the current view icon in Angular Pivot Table toolbar items.

Highlight current view icon in Pivot Table toolbar items

When working with a pivot table, you may want to visually differentiate the current view icon (i.e., table or chart) among toolbar items by customizing their background colors. This can be particularly useful for enhancing the user experience and making it easier to keep track of which view is currently active. Below is a step-by-step guide on how to do this, along with a code example.

Step 1: First, define the styles for the background colors to be applied to the view icons, such as the table and chart. In this example, we have used the color pink.

[app.component.css]

   .chart-background {
     background: pink !important;
   }
   .grid-background {
     background: pink !important;
   }

In the above code example, the !important declaration is used to ensure the background color is applied even if other styles are trying to override it.

Step 2: Next, you will need to add logic to dynamically set the background for the current view icon (i.e., table or chart) based on certain conditions. To achieve this, use the dataBound event in your code. The dataBound event is triggered when the pivot table is rendered.

Here is a code example that shows how to dynamically set the background for the current view icon in toolbar items.

[app.component.html]

<ejs-pivotview #pivotview id="PivotView" (databound)="dataBound($event)"></ejs-pivotview>

[app.component.ts]

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

// Set the background color for the current view icon in the toolbar items.
dataBound(){
    if(this.pivotObj.currentView=="Table"){
      // Here we have applied the background color for table icon
      document.getElementById(this.pivotObj.element.id + 'chart_menu').classList.remove('chart-background');
      document.getElementById(this.pivotObj.element.id + 'grid').classList.add('grid-background');
    } else if(this.pivotObj.currentView=="Chart"){
      // Here we have applied the background color for chart icon
      document.getElementById(this.pivotObj.element.id + 'grid').classList.remove('grid-background');
      document.getElementById(this.pivotObj.element.id + 'chart_menu').classList.add('chart-background');
    }
}

In the above dataBound event, pivotObj.currentView returns the current view of the pivot table, whether it is Table or Chart. If it’s Table, we remove the chart-background class from the chart_menu toolbar item and add the grid-background class to the grid toolbar item, and vice versa. This will effectively apply the background color to the toolbar items.

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

GIF

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

Conclusion:

I hope you enjoyed learning how to customize the background color of selected toolbar Item in Angular Pivot Table

You can refer to our Angular Pivot Table feature tour 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!