Search results

Drill Through

Allows you to view the detailed data or an original value of the summarized cell of the pivot table. It can be enabled by setting the allowDrillThrough property to true. By double-clicking any value cell, you can view the detailed report in a new window. In this report, you can get the row and column headers and summary value(measure) of the clicked cell. Also, you can include or exclude the fields available in the data source using the column chooser option. By default, the detailed reports for bound fields will be shown in the pivot report.

To use the drill through feature, inject the DrillThroughService module in the pivot grid.

Source
Preview
app.component.ts
app.module.ts
import { Component } from '@angular/core';
import { IDataOptions, PivotView, DrillThroughService } from '@syncfusion/ej2-angular-pivotview';
import { Pivot_Data } from './datasource.ts';

@Component({
  selector: 'app-container',
  providers: [DrillThroughService],
  template: `<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings allowDrillThrough='true' width=width></ejs-pivotview>`
})

export class AppComponent {

    public width: string;
    public dataSourceSettings: IDataOptions;

    ngOnInit(): void {

        this.width = "100%";

        this.dataSourceSettings = {
            dataSource: Pivot_Data,
            expandAll: false,
            enableSorting: true,
            columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
            values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
            rows: [{ name: 'Country' }, { name: 'Products' }],
            formatSettings: [{ name: 'Amount', format: 'C0' }],
            filters: []
        };
    }
 }
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { PivotViewAllModule, PivotFieldListAllModule } from '@syncfusion/ej2-angular-pivotview';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        PivotViewAllModule,
        PivotFieldListAllModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }