How to Trigger DrillThrough on Single Click in Angular Pivot Table?

Introduction:

In Syncfusion’s Angular Pivot Table, the default behavior is that a single click on a cell triggers the cellClick event, while a double-click triggers the drillThrough event. This event is useful when you want to fetch and view the raw data behind a summarized cell value. However, there are cases where developers might want to trigger the drillThrough event directly with a single click to streamline the user experience.

This article demonstrates how to trigger the drillThrough event on a single click by programmatically triggering a double-click event using the cellClick event. This approach enables direct access to the raw data without requiring a double click from the user.

Triggering the DrillThrough dialog on single click

To achieve this behavior, we take use the cellClick event, which is triggered for every single click on the Pivot Table. By manually dispatching a dblclick (double-click) event inside this handler, we can simulate the default double-click behavior and invoke the drillThrough event.

Implementation

The following code demonstrates how to trigger the drillThrough event on a single click in the Angular Pivot Table:

[app.component.ts]

import {CellClickEventArgs,} from '@syncfusion/ej2-angular-pivotview';
import { DrillThroughEventArgs} from '@syncfusion/ej2-pivotview';

@Component({
 template: `<ejs-pivotview (cellClick)='cellClick($event)' allowDrillThrough=true (drillThrough)="drillThrough($event)"></ejs-pivotview>`,
})

  cellClick(args: CellClickEventArgs) {
    let pivotElement = args.currentCell as HTMLElement; // Get clicked cell element

    if (pivotElement) {
        let dblClickEvent = new MouseEvent("dblclick", {
            bubbles: true,
            cancelable: true,
            view: window
        });
        pivotElement.dispatchEvent(dblClickEvent); // Dispatch the double-click event
    }
 }
 drillThrough(args: DrillThroughEventArgs) {
    // Restricted the drill through dialog here to get only the raw data information.
    args.cancel = true;
    console.log('Actual Data of the cell from drillThrough event',args.rawData);
 }

Explanation of the code snippet:

• The cellClick event is triggered when a user clicks on a cell in the Pivot Table.
• Within this event handler, a MouseEvent of type “dblclick” is created and dispatched on the same cell element.
• This simulated double-click invokes the drillThrough event programmatically.
• In the drillThrough event, args.cancel = true is set to prevent the dialog from appearing if you only want to use the raw data programmatically.
• The args.rawData array contains the detailed records from the underlying data source related to the clicked cell.

Note

This approach is purely for user interaction enhancement. If you wish to display the drill-through dialog instead of logging data to the console, simply remove or modify the args.cancel = true line in the drillThrough event handler.

Screenshot

For a practical demonstration, please refer to the sample on StackBlitz.

Conclusion

We hope this guide has helped you understand how to trigger the drillThrough event on a single click in the Syncfusion 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!