Pivot Table drill down issue

[Charles]

Hi,

My pivot table is loading data from the database, but l was not able to display the date (year & quarter) like the one found your documentation https://ej2.syncfusion.com/angular/documentation/pivotview/drill-down/ 

 Below is my codes

public jsonReport: IDataOptions;

    public csvReport: IDataOptions;

    public contentDropDown: DropDownList;

    public gridSettings: GridSettings;

    public remoteData: DataManager;

    @ViewChild('pivotview',{static:false})

    public pivotObj: PivotView;

    ngOnInit(): void {

        this.gridSettings = {

            columnWidth: 120

        } as GridSettings;

        this.remoteData = new DataManager({

            url: 'api/Planting',

            adaptor: new WebApiAdaptor,

            crossDomain: true

        });

        this.jsonReport = {

            dataSource: this.remoteData,

            type: 'JSON',

            expandAll: true,

            filters: [],

            drilledMembers: [{ name: 'PlantDate', items: ['Model'] }],

            columns: [{ name: 'PlantDate' }, { name: 'Model', caption: 'Model Name' }],

            rows: [{ name: 'Category', caption: 'Category' }, { name: 'Product', caption: 'Product' }],

            formatSettings: [{ name: 'PlantDate', format: 'y', type: 'date' }],

            values: [{ name: 'Quantity', caption: 'Quantity' }]

        };      

    }

<div class="control-section" style="overflow:auto;">    

    <div class="content-wrapper">

        <ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=jsonReport width='100%' height='300' [gridSettings]='gridSettings'>

        </ejs-pivotview>

    </div>

</div>

Kindly assit. I will appreciate it if l can get a sample.

Regards

Charles

[AngelinFaithSheeba PaulvannanRajadurai]

Hi Charles,

When a data source contains date type fields, you can use the grouping feature to group those date type fields into years, quarters, months and days. Please refer the below code example and sample.

Code example:

this.dataSourceSettings = {

      groupSettings: [{

          name: 'OrderDate',

          type: 'Date',

          groupInterval: ['Years', 'Quarters'],

        },

      ],

    }

Output screenshot:

Sample: https://stackblitz.com/edit/angular-fnwg76-pztq8t?file=app.component.ts

Web Controller: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebAPISample66744954

Also, please refer the below document to know more about date grouping.

Document: https://ej2.syncfusion.com/angular/documentation/pivotview/grouping/#date-grouping

If your data source does not have date type fields, bind the fields representing "Year" and "Quarter" from your data source to the columns to get the output shown in the drill down sample in our documentation. Please refer the below code example and sample.

Code example:

this.dataSourceSettings = {

      columns: [{ name: 'Year' },{name: 'Quarter'}],

    };

Output screenshot:

Sample: https://stackblitz.com/edit/angular-fnwg76-pztq8t?file=app.component.ts

Web Controller: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebAPISample66744954

Also, please refer the below document to know more about data binding.

Document: https://ej2.syncfusion.com/angular/documentation/pivotview/getting-started/#adding-fields-to-row-column-value-and-filter-axes

Regards,

Angelin Faith Sheeba.